上下に無限にスクロールするループのページを作成しようとしています。
現在、jqueryを使用して、コンテンツをページの上部から下部に再配置しています。これにより、下にスクロールすると見栄えの悪いループが作成されますが、ユーザーが上にスクロールしても機能するようにしたいと思います。
問題は、コンテンツがページの負の垂直スペースに配置されていても、スクロールがそのスペースまで拡張されないことであるように思われます。私が知っている限り、これを無効にする方法はないので、何らかの回避策を探しています。
javascriptを使用してスクロールを無効にし、scrollイベントを使用して要素を再配置することを考えましたが、ページ上ですでに多くの絶対位置の要素とアニメーションが発生しているため、そのルートでのパフォーマンスが心配です。
他のリードはありますか？
OK...私はそれを解決しました。
私はこのスクリプトを採用しました。このスクリプトは、下部に到達するとスクロール位置をページの上部に、上部に到達すると下部に即座に再配置します。
$(window).scroll(function() {
if ( $(window).scrollTop() >= 18830 ) {
$(window).scrollTop(201);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop(18629);
}
});
次に、ページの下部と上部のコンテンツが同じであることを確認しました。この移転が起こったとき、フラッシュか何かがあるだろうと思いましたが、それはスムーズです！
私が一番好きな解決策はこれ（コード）です。これは、下部に到達する前に下部に要素を追加し、スクロールが継続していることを確認するためです（スムーズな スクロールがオンの場合でも）。ただし、スクロールが非常に速く発生する可能性がある携帯電話ではうまく機能しません。同様の問題を扱っているCodeMirrorの偽のスクロールバーに関するMarijnHaverbekeのすばらしい記事をお勧めします。
スニペットをいくつか残しておきます。
まず、いくつかの背景。そもそもなぜスクロールバーを偽造したいのでしょうか。
巨大なドキュメントが読み込まれたときに応答性を維持するために、CodeMirrorはドキュメント全体をレンダリングするのではなく、現在スクロールされて表示されているドキュメントの一部のみをレンダリングします。これは、作成するDOMノードの数がビューポートのサイズによって制限され、テキストの変更によってトリガーされるブラウザーのリレーアウトが比較的安価であることを意味します。
そしてさらに下に...
次に、ホイールイベントをリッスンしますが、それらに対してpreventDefaultを呼び出したり、それに応じてスクロールしたりすることはありません。代わりに、ホイールイベントがコンテンツをスクロールしたピクセルの量を監視するタイムアウトを設定することで応答し、それを使用して実行時のデルタからピクセルへのレートを微調整します。
HTML本文を2回（または3回）クローンします（javascriptまたはその他の方法で）。ページを上部ではなく中央のコピーから開始すると、好きなようにスクロールを処理できます。
マフムードの答えに基づいて、私はこれを数分でハックしました。
キーまたはマウスホイールを使用してスクロールすると（少なくとも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>
多くの人が示唆しているように、ページの上部と下部がまったく同じに見えない場合は、コンテンツのクローンを作成して、同じように表示する必要があります。非常にスムーズに機能するこの手法を使用して例を作成しました。
/*
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>