Question

我正试图让一个div在我的Wordpress安装中垂直滚动通过一些li元素 - 当谈到jQuery / javascript时，我是一个严肃的业余爱好者，但是在整天在这里通过论坛阅读之后，我想我会检查并看看有经验的人是否可以帮助我。

我找到了很多很棒的解决方案，但是每个解决方案似乎都与另一个jQuery或javascript等实例冲突。

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

我正在处理的页面位于：http://ryanlinstrom.com/sandbox/vimeo-test/

我正在页面上使用以下脚本 - 如果有任何方式进行集成以便我的#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));
    }

Answer 1

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

然后做类似的事情：

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

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

然后，当然，将overflow:hidden添加到您的css中以删除滚动条。

在Wordpress中垂直滚动溢出div

1 个答案: