如何使这个jQuery div滚动条在同一个类的多个div上工作？

Question

我一直在使用此jQuery div滚动脚本（ 如何使用jQuery在单击和鼠标悬停时进行可滚动的div滚动 ）效果良好，但现在我的客户希望我在Wordpress博客页面（其中有多个区域）中使用它需要滚动的页面。

是否可以在具有相同类（即“滚动”）的多个实例上使用此脚本？

这是我的剧本；

$(function() {
var ele   = $('.scroll');
var speed = 25, scroll = 5, scrolling;

$('#scroll-up').mouseenter(function() {
    // Scroll the element up
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() - scroll );
    }, speed);
});

$('#scroll-down').mouseenter(function() {
    // Scroll the element down
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() + scroll );
    }, speed);
});

$('#scroll-up, #scroll-down').bind({
    click: function(e) {
        // Prevent the default click action
        e.preventDefault();
    },
    mouseleave: function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
        }
    }
});
});

这就是标记（主“提要”包装器和单个“单个” div都需要滚动）；

<div class="feed scroll">

    <div class="single scroll">
        <!-- single blog post content -->
    </div>

    <div class="single scroll">
        <!-- single blog post content -->
    </div>

    <div class="single scroll">
        <!-- single blog post content -->
    </div>

</div>

<a id="scroll-up" href="#">Scroll Up</a>
<a id="scroll-down" href="#">Scroll Down</a>

因此，基本上我需要能够逐个滚动所有内容。

Answer 1

如果需要多个部分，则必须使用类而不是ID来标识这些部分，然后必须遍历DOM（从链接到要滚动的内容）以找到正确的div。 另外，您必须为要滚动的每个元素分别存储“滚动”状态。

口头解释有很多东西。 这是一个示例，该示例是根据您引用的问题进行修改的： http : //jsfiddle.net/Qp8bB/

注意：

$(this).siblings(".content")

这就是我们从链接元素导航到内容的方式

element.attr('data-scrolling', 'true');

这就是我们存储每个元素的滚动状态的方式（通过临时属性）

不是最干净的代码，但我希望它能使您明白这一点。