Question

我一直在使用这个jQuery div滚动脚本（How to make a scrolable div scroll on click and mouseover using jQuery）效果很好，但现在我的客户希望我在Wordpress博客页面中使用它，页面上有多个区域需要滚动。

是否可以在具有相同类的多个实例上使用此脚本（即;'scroll'）？

这是我的剧本;

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

这是标记（主要的“feed”包装器和单个“single”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")

这是我们如何从link元素导航到内容

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

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

不是最干净的代码，但我希望它能解决问题。

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

1 个答案: