我正在尝试创建一个向上和向下无限滚动循环的页面。
目前我正在使用 jquery 将内容从页面顶部重新定位到底部。当您向下滚动时，这会创建一个很好的无缝循环，但我希望它在用户向上滚动时也能工作。
问题似乎是，即使内容位于页面上的负垂直空间，滚动也不会延伸到该空间。据我所知，没有办法覆盖它，所以我正在寻找某种解决方法。
我想使用 javascript 来禁用滚动并使用滚动事件来重新定位元素，但是页面上已经有很多绝对定位的元素和动画，所以我担心采用这条路线的性能。
还有其他线索吗？
问问题
22993 次
6 回答
4
好的...我解决了。
我修改了这个脚本，当你到达底部时，它会立即将滚动位置重新定位到页面顶部，当你到达顶部时，它会立即将滚动位置重新定位到底部。
$(window).scroll(function() {
if ( $(window).scrollTop() >= 18830 ) {
$(window).scrollTop(201);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop(18629);
}
});
然后我确保页面底部和顶部的内容是相同的。我以为这次搬迁发生时会有闪光或什么的，但它很顺利！
于 2012-06-08T22:02:00.773 回答
3
我最喜欢的解决方案是这个（代码），因为它在到达底部之前在底部添加元素，确保滚动保持连续（即使平滑 滚动）。但是，它在滚动可以很快发生的手机上效果不佳。我推荐 Marijn Haverbeke 在 CodeMirror 中关于假滚动条的精彩文章，他在其中处理了类似的问题。
我给你留下一些片段。
首先，一些背景。为什么我们要先伪造一个滚动条？
为了在加载大量文档时保持响应，CodeMirror 不会渲染整个文档，而只会渲染当前滚动到视图中的部分。这意味着它创建的 DOM 节点的数量受到视口大小的限制，并且由文本更改触发的浏览器重新布局相对便宜。
而再往下...
然后，它会监听轮子事件，但从不对它们调用 preventDefault 或滚动响应它们。相反，它通过设置超时来响应，以观察轮事件滚动内容的像素数量，并在运行时使用它来调整其增量到像素的速率。
于 2012-12-04T20:24:41.977 回答
2
克隆您的 HTML 正文两次（或三次）（使用 javascript 或其他方式）。从中间副本而不是顶部开始页面，然后您可以随意处理滚动。
于 2012-05-13T09:32:42.887 回答
1
于 2012-05-13T21:38:43.893 回答
0
在 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>
于 2012-05-13T12:38:43.960 回答
0
正如许多人所建议的那样，如果您的页面在顶部和底部看起来并不完全相同，您需要克隆您的内容以使其看起来像它一样。我已经使用这种非常流畅的技术做了一个例子：
/*
Ininite looping scroll.
Tested and works well in latest Chrome, Safari and Firefox.
*/
(function (window) {
'use strict';
var doc = document,
body = doc.body,
html = doc.documentElement,
startElement = doc.getElementsByClassName('is-start')[0],
clones = doc.getElementsByClassName('is-clone'),
disableScroll = false,
docHeight,
scrollPos,
clonesHeight,
i;
function getScrollPos() {
return (window.pageYOffset || html.scrollTop) - (html.clientTop || 0);
}
function getDocHeight() {
return Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
}
function getClonesHeight() {
i = 0;
clonesHeight = 0;
for (i; i < clones.length; i += 1) {
clonesHeight = clonesHeight + clones[i].offsetHeight;
}
return clonesHeight;
}
docHeight = getDocHeight();
clonesHeight = getClonesHeight();
window.addEventListener('resize', function () {
scrollPos = getScrollPos();
docHeight = getDocHeight();
clonesHeight = getClonesHeight();
if (scrollPos <= 0) {
window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
}
}, false);
window.addEventListener('scroll', function () {
if (disableScroll === false) {
scrollPos = getScrollPos();
if (clonesHeight + scrollPos >= docHeight) {
// Scroll to the top when you’ve reached the bottom
window.scroll(0, 1); // Scroll 1 pixel to allow upwards scrolling.
disableScroll = true;
} else if (scrollPos <= 0) {
// Scroll to the top of the clones when you reach the top.
window.scroll(0, docHeight - clonesHeight);
disableScroll = true;
}
if (disableScroll) {
// Disable scroll-repositioning for a while to avoid flickering.
window.setTimeout(function () {
disableScroll = false;
}, 100);
}
}
}, false);
// Needs a small delay in some browsers.
window.setTimeout(function () {
if (startElement) {
// Start at the middle of the starting block.
window.scroll(0, Math.round(startElement.getBoundingClientRect().top + document.body.scrollTop - (window.innerHeight - startElement.offsetHeight) / 2));
} else {
// Scroll 1 pixel to allow upwards scrolling.
window.scroll(0, 1);
}
});
}(this));section {
position: relative;
text-align: center;
height: 80vh;
}
.red {
background: #FF4136;
}
.green {
background: #2ECC40;
}
.blue {
background: #0074D9;
}
.orange {
background: rebeccapurple;
}
h1 {
margin: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
font-size: 5vw;
color: #fff;
text-transform: uppercase;
}
body {
font-family: "Avenir Next", Montserrat, Helvetica, sans-serif;
font-weight: normal;
font-size: 100%;
}
::scrollbar {
display: none;
}<section class="green">
<h1>One</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="orange">
<h1>And</h1>
</section>
<section class="blue">
<h1>All</h1>
</section>
<section class="red">
<h1>For</h1>
</section>
<!--
These following blocks are the same as the first blocks to get that looping illusion going. You need to add clones to fill out a full viewport height.
-->
<section class="green is-clone is-start">
<h1>One</h1>
</section>
<section class="red is-clone">
<h1>For</h1>
</section>于 2015-08-18T11:23:02.027 回答