双向无限滚动-向上和向下
双向无限滚动-向上和向下
提问于 2012-05-13 17:28:47
我试图创建一个页面，这是一个无休止的滚动循环，向上和向下。
目前，我正在使用jquery将内容从页面顶部重新定位到底部。这会在你向下滚动时创建一个漂亮的无缝循环，但我希望当用户向上滚动时它也能起作用。
问题似乎是，即使内容定位在页面的负垂直空间中，滚动也不会延伸到该空间。据我所知，没有办法覆盖它，所以我正在寻找一些工作。
我想过使用javascript来禁用滚动，并使用scroll事件来重新定位元素，但是页面上已经发生了很多绝对定位的元素和动画，所以我很关心采用这种方法的性能。
还有其他线索吗？
回答 4
Stack Overflow用户
发布于 2012-06-09 06:02:01
好的..。我解决了这个问题。
我采用了this script，当您到达页面底部时，它会立即将滚动位置重新定位到页面顶部，当您到达顶部时，滚动位置会立即重新定位到页面底部。
$(window).scroll(function() {
if ( $(window).scrollTop() >= 18830 ) {
$(window).scrollTop(201);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop(18629);
}
});然后我确保页面底部和顶部的内容是相同的。我以为这个迁移发生的时候会有闪光之类的东西，但是一切都很顺利！
Stack Overflow用户
发布于 2012-05-13 17:32:43
克隆HTML主体两次(或三次)(使用javascript或其他方式)。从页面的中间副本开始，而不是从顶部开始，然后您可以随心所欲地处理滚动。
Stack Overflow用户
发布于 2012-05-13 20:38:44
根据Mahmoud的回答，我在几分钟内就解决了这个问题。
当使用按键或鼠标滚轮滚动时，它会有一些效果(至少在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"> </div>
<div style="height: 600px; background-color: green"> </div>
<div style="height: 600px; background-color: blue"> </div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10570684
复制相关文章
相似问题