jquery - div 内滚动循环

Question

我想尝试实现一个循环滚动页面的效果。我发现这个脚本我做了一些更改，滚动 1px 加载，以便启用循环。

我应该在 div 中应用此效果吗...但我不知道如何更改代码才能使其正常工作。

它有助于转动包装器 div 内的循环吗？

$(document).ready(function() {   
$('body').height( WRHeight + $(window).height() );
$(window).scroll(function() {
    if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
        $(window).scrollTop(1);
    }
    else if ( $(window).scrollTop() == 0 ) {
        $(window).scrollTop($('body').height() - $(window).height() -1);
    }    
});

loop div jsfiddle

Answer 1

我重新实现了该脚本并添加了一些注释，希望使其更加清晰:

// Container element which has a scrollbar
var $c = $("#container");

// Child element which is taller than the container
var $e = $("#element");

// The point at which the page will loop when scrolling down
var loopPoint = $e.height() - $c.height();

// Define a function which runs whenever the scroll position of $c changes
$c.scroll(function () {

    // If the new scroll position matches our loop point
    if ($c.scrollTop() === loopPoint) {
        // Scroll to (almost) the the top ('0' would be the top; we do this so we don't loop back again instantly)
        $c.scrollTop(1);
    }

    // Otherwise, if the new scroll position = the top of the element
    else if ($c.scrollTop() === 0) {
        // Scroll to (almost) the bottom, we can use (our loop point - 1)
        $c.scrollTop(loopPoint - 1);
    }
});

这里有一个 JSfiddle 供您使用:http://jsfiddle.net/cjmoran/2do67um8/

注意:我注意到这种方法会严重破坏 Chrome 中的中键滚动，甚至导致 JSfiddle 崩溃。可能有更好的方法来实现这一点，这样就不会发生这种情况。似乎在最新版本的 Firefox 中运行良好，但这些是我测试过的唯一浏览器。