Javascript 双向无限滚动-上下滚动_Javascript_Jquery_Html_Scroll

Javascript 双向无限滚动-上下滚动

javascript jquery html scroll

Javascript 双向无限滚动-上下滚动,javascript,jquery,html,scroll,Javascript,Jquery,Html,Scroll,我试图创建一个页面，这是一个无休止的上下滚动循环 function onScroll(){ var SAFETY_MARGIN = 50, scrollPos = $(this).scrollTop(), docHeight = $(document.body).height(), winHeight = $(window).height(), firstDiv = $('body>div:first-child')[

我试图创建一个页面，这是一个无休止的上下滚动循环

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

目前，我正在使用jquery将内容从页面顶部重新定位到底部。当你向下滚动时，这会创建一个很好的无seemless循环，但我希望它在用户向上滚动时也能工作

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

问题似乎是，即使内容位于页面的负垂直空间，滚动条也不会延伸到该空间。据我所知，没有办法覆盖这一点，所以我正在寻找一些类型的工作

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

我曾想过使用javascript禁用滚动，并使用scroll事件重新定位元素，但页面上已经有很多绝对定位的元素和动画，因此我担心采用这种方式的性能

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

还有其他线索吗？

克隆HTML正文两（或三）次（用javascript或其他语言）。在中间复制，而不是在顶部启动页面，然后你可以处理滚动，但是你喜欢。

根据艾哈迈迪的答案建立起来，我在几分钟内就把它破解了。p>

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

当使用按键或鼠标滚轮滚动时，它会有一些效果（至少在Firefox上是这样），但当拖动滚动条时，它会变得非常灵巧。根据

div

高度与视口高度的关系，各种烟花也可能发生

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

不过，我希望这能帮助你走上正确的方向

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

函数onScroll（）{
var安全裕度=50，
scrollPos=$（this）.scrollTop（），
docHeight=$（document.body）.height（），
winHeight=$（窗口）.height（），
firstDiv=$（'body>div:first child'）[0]，
lastDiv=$（'body>div:last child'）[0]，
下限=安全裕度，
higherLimit=docHeight-安全裕度；
//滚动过高
如果（scrollPos=higherLimit）{
//将内容移至底部
$（firstDiv）.appendTo（document.body）；
//调整滚动位置以进行补偿
//查找顶部缺少的内容
$（窗口）.scrollTop（scrollPos-$（firstDiv.height（））；
} 
}
$（窗口）。滚动（onScroll）；
$（窗口）。加载（函数（）{
var$body=$（document.body）；
$（window.scrollTop（$body.height（）/2）；
});

还有其他线索吗

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

看到这些了吗

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

（我没有写信，也不知道是谁写的）

好的。。。我算出来了

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

我修改了它，当你到达页面底部时，它会立即将滚动位置重新定位到页面顶部，当你到达顶部时，它会立即将滚动位置重新定位到页面底部

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

$(window).scroll(function() {
    if ( $(window).scrollTop() >= 18830 ) {
        $(window).scrollTop(201);
    }
    else if ( $(window).scrollTop() == 0 ) {
        $(window).scrollTop(18629);
    }    
});

然后我确保页面底部和顶部的内容是相同的。我原以为在这次搬迁发生的时候会有一个闪光或什么的，但一切都很顺利

我最喜欢的解决方案是（），因为它在到达底部之前在底部添加元素，确保滚动保持连续（即使启用）。然而，它在移动电话上的效果并不好，因为在移动电话上滚动很快就会发生。我推荐Marijn Haverbeke在CodeMirror中的假滚动条上，他在那里处理类似的问题

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

我给你留下一些片段

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

首先是一些背景。我们为什么要先伪造滚动条呢

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

为了在加载大型文档时保持响应，CodeMirror不会呈现整个文档，而只呈现当前滚动到视图中的部分文档。这意味着它创建的DOM节点数量受到视口大小的限制，而由文本更改触发的浏览器重新显示相对便宜

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

再往下走

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

然后，它侦听控制盘事件，但从不调用它们的preventDefault，也不会滚动响应它们。相反，它通过设置超时来观察滚轮事件滚动内容的像素量，并使用该超时在运行时调整其增量到像素的速率

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

正如许多人所建议的，如果你的页面在顶部和底部看起来不完全一样，你需要克隆你的内容，使它看起来像它一样。我使用这种技术制作了一个非常平滑的示例：

function onScroll(){
    var SAFETY_MARGIN = 50,
        scrollPos = $(this).scrollTop(),
        docHeight = $(document.body).height(),
        winHeight = $(window).height(),
        firstDiv = $('body>div:first-child')[0],
        lastDiv = $('body>div:last-child')[0],
        lowerLimit = SAFETY_MARGIN,
        higherLimit = docHeight - SAFETY_MARGIN;

    // Scrolling too high
    if( scrollPos <= lowerLimit ){

        // Move content to top;
        $(lastDiv).prependTo(document.body);

        // Adjust scroll position to compensate
        // for the new content at the top
        $(window).scrollTop(scrollPos + $(lastDiv).height());

    }

    // Scrolling too low
    else if( scrollPos + winHeight >= higherLimit ){

        // Move content to bottom
        $(firstDiv).appendTo(document.body);

        // Adjust scroll position to compensate
        // for the missing content at the top
        $(window).scrollTop(scrollPos - $(firstDiv).height());
    } 
}


$(window).scroll(onScroll);

$(window).load(function(){
    var $body = $(document.body);
    $(window).scrollTop($body.height() / 2);
});

</script>
</head>
<body>

<div style="height: 600px; background-color: red">&nbsp;</div>
<div style="height: 600px; background-color: green">&nbsp;</div>
<div style="height: 600px; background-color: blue">&nbsp;</div>

</body>
</html>

/*
无限循环卷轴。
经过测试，在最新的Chrome、Safari和Firefox中运行良好。
*/
（功能（窗口）{
"严格使用",；
var doc=文件，
body=doc.body，
html=doc.documentElement，
startElement=doc.GetElementsByCassName（'is-start'）[0]，
clones=doc.getElementsByClassName（'is-clone'），
disableScroll=false，
八，
scrollPos，
克隆高度，
我
函数getScrollPos（）{
return（window.pageYOffset | | html.scrollTop）-（html.clientTop | | 0）；
}
函数getDocHeight（）{
返回Math.max（body.scrollHeight、body.offsetHeight、html.clientHeight、html.scrollHeight、html.offsetHeight）；
}
函数getClonesHeight（）{
i=0；
克隆高度=0；
对于（i；i<1.length；i+=1）{
clonesHeight=clonesHeight+clones[i]。视线外；
}
返回克隆高度；
}
docHeight=getDocHeight（）；
clonesHeight=getClonesHeight（）；
window.addEventListener（'resize'，函数（）{
scrollPos=getScrollPos（）；
docHeight=getDocHeight（）；
clonesHeight=getClonesHeight（）；
如果（滚动位置=八）{
//到达底部后滚动到顶部
window.scroll（0，1）；//滚动1个像素以允许向上滚动。
disableScroll=true；
}else if（scrollPos-hmm…，但是滚动到顶部：0px位置之外似乎是不可能的，即使您将元素放置在该点之外。您将不再使用该语法。暂时搁置您的方法，想象一个简单的、没有JS的页面，其中包含一些HTML元素。克隆内容。滚动到第一个副本的末尾（第二个开始）。你不能上下滚动吗？一旦用户开始滚动，你就开始从bo移动数据