javascript - この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>

したがって、基本的にはすべてを個別にスクロールできる必要があります。