1

我一直在使用这个 jQuery div 滚动脚本（How to make a scrollable div scroll on click and mouseover using jQuery）效果很好，但现在我的客户希望我在一个 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>

所以基本上我需要能够单独滚动所有内容。

4

1 回答 1

0

如果您想要多个部分，则必须使用类而不是 id 来识别部分，然后您必须遍历 DOM 从链接到要滚动的内容才能找到正确的 div。此外，您必须为您正在滚动的每个元素单独存储“滚动”状态。

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

笔记：

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

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

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

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

不是最干净的代码，但我希望它能够理解这一点。

于 2013-04-16T21:59:51.717 回答