如何使這個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');

這就是我們存儲每個元素的滾動狀態的方式（通過臨時屬性）

不是最干凈的代碼，但我希望它能使您明白這一點。