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

Question

I've been using this jQuery div scroll script ( How to make a scrolable div scroll on click and mouseover using jQuery ) to good effect, but now my client wants me to use it within a Wordpress blog page where there are multiple areas on the page that need scrolling.

Is it possible to use this script on multiple instances with the same class (Ie; 'scroll')?

This is my script;

$(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;
        }
    }
});
});

and this is the markup (Both the Main "feed" wrapper and the individual "single" divs need to be scrollable);

<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>

So basically I need to be able to scroll everything individually.

Answer 1

If you want multiple sections, you'll have to use classes, rather than ids for identifying the sections, then you'll have to traverse the DOM from your link to the content to scroll in order to find the right div. Also, you'll have to store the 'scrolling' status individually for each element that you're scrolling.

That's a lot of stuff to explain verbally. Here's an example, modified from the question you referenced: http://jsfiddle.net/Qp8bB/

Note:

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

This is how we navigate from the link element to the content

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

This is how we store the scrolling status of each element (via a temporary attribute)

Not the cleanest code, but I hope it gets the point across.