Javascript Wordpress中的垂直滚动溢出div

我正试图让一个div在我的Wordpress安装中垂直滚动许多li元素——对于jQuery/javascript，我是一个认真的业余爱好者，但在整天阅读了这里的论坛之后，我想我会检查一下，看看有没有经验的人可以帮我

我已经找到了很多很好的解决方案，但它们中的每一个似乎都与另一个jQuery或javascript实例相冲突

理想情况下，我想要一些可以在悬停状态下滚动的东西，但我会满足于按钮，甚至只是简单地隐藏丑陋的滚动条

我正在处理的页面如下：

我在页面上使用以下脚本-如果有任何方法可以集成，以便我的#thumbs div可以滚动而不添加其他脚本，那就太好了

        var apiEndpoint = 'http://vimeo.com/api/v2/';
    var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
    var oEmbedCallback = 'switchVideo';
    var videosCallback = 'setupGallery';
    var vimeoUsername = 'user677763';

    // Get the user's videos
    $(document).ready(function() {
        $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);
    });

    function getVideo(url) {
        $.getScript(oEmbedEndpoint + '?url=' + url + '&width=780&height=435&callback=' + oEmbedCallback);
    }

    function setupGallery(videos) {

        // Sets the video title
        $('#stats h2').text(videos[0].title);

        // Load the first video
        getVideo(videos[0].url);


        // Add the videos to the gallery
        for (var i = 0; i < videos.length; i++) {
            var html = '<li><a href="' + videos[i].url + '" name="'+ videos[i].title +'"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
            html += '</a><p>' + videos[i].title + '</p></li>';
            $('#thumbs ul').append(html);
        }


        // Switch to the video when a thumbnail is clicked
        $('#thumbs a').click(function(event) {
            event.preventDefault();
            getVideo(this.href);
            $('#stats h2').detach();
            var title = $(this).attr("name");
            $('#stats').append('<h2></h2>');
            $("#stats h2").text(title);

            return false;
        });

    }

    function switchVideo(video) {
        $('#embed').html(unescape(video.html));
    }

varhttp://vimeo.com/api/v2/';
var oEmbedEndpoint=http://vimeo.com/api/oembed.json'
var oEmbedCallback='switchVideo'；
var videosCallback='setupGallery'；
var vimeoUsername='user677763'；
//获取用户的视频
$（文档）.ready（函数（）{
$.getScript（apiEndpoint+VimeUserName+'/videos.json？callback='+videosCallback）；
});
函数getVideo（url）{
$.getScript（oEmbedEndpoint+'？url='+url+'&width=780&height=435&callback='+oEmbedCallback）；
}
功能设置库（视频）{
//设置视频标题
$（'#stats h2'）。文本（视频[0]。标题）；
//加载第一个视频
getVideo（视频[0].url）；
//将视频添加到库中
对于（var i=0；i'；
$（'#thumbs ul'）.append（html）；
}
//单击缩略图时切换到视频
$（“#拇指a”）。单击（函数（事件）{
event.preventDefault（）；
getVideo（this.href）；
$（'#stats h2'）.detach（）；
var title=$（this.attr（“name”）；
$（'#stats'）。附加（''）；
$（“#统计数据h2”）。文本（标题）；
返回false；
});
}
功能切换视频（视频）{
$（'#embed'）.html（unescape（video.html））；
}

我建议使用两个重叠的不可见div（一个在顶部，一个在底部）

然后做一些类似的事情：

$(".top-scroll").bind("mouseover", function(){
    $(".wrapping-div").animate({scrollTop: -= 5}, 100)
});

$(".bottom-scroll").bind("mouseover", function(){
    $(".wrapping-div").animate({scrollTop: += 5}, 100);
});

然后，当然，在css中添加

overflow:hidden

，以删除滚动条