無制限のx-repeatとページの無制限スクロール

Question

私はしばらく私を悩ませている質問があります。

divが縦に積み重なっているとします。私はそれらの5つを持っているとしましょう。私がしたいのは、CSS、background-repeat:repeat-yのように、5 divを繰り返すことです。

このウェブサイトの意味は、https://duroc.maです。あなたはそのページをドラッグすることができ、内容は無限に繰り返されるようです。 xとyの方向ですが、yの方向で、draggingの代わりにscrollにすることができます。

これはjQueryで行うことができるので、このカテゴリの選択が可能です。私は本当に年齢を探していましたが、私が見つけたのは「endless scroll」の原則です。つまり、次のページに移動する代わりに新しいコンテンツをスクロールダウンできます。

私は何をする必要があるのか​​誰かに教えてもらえますか？または、少なくとも正しい方向に私を移動する出発点ですか？

ありがとうございます！歓声

Answer 1

JavaScriptを使用してソリューションをお試しください。私の例はスクロールダウンのみで動作し、必要に応じてスクロールアップして簡単に更新できます。

var parent = document.querySelector('.parent'); 
 

 
parent.addEventListener('scroll', endlessScroll); 
 

 
function endlessScroll() { 
 
    var height = 0; 
 
    for (var i = 0; i < parent.children.length; i++) { 
 
    height += parent.children[i].clientHeight; 
 
    } 
 
    var firstChild = parent.firstElementChild; 
 
    if (parent.scrollTop >= height - parent.clientHeight) { 
 
    parent.appendChild(firstChild); 
 
    parent.scrollTop -= firstChild.clientHeight; 
 
    } 
 
}

.parent { 
 
    height: 300px; 
 
    overflow: auto; 
 
    width: 100%; 
 
} 
 

 
.parent div { 
 
    height: 150px; 
 
} 
 

 
.one { 
 
    background: red; 
 
} 
 

 
.two { 
 
    background: yellow; 
 
} 
 

 
.three { 
 
    background: green; 
 
}

<div class="parent"> 
 
    <div class="one"></div> 
 
    <div class="two"></div> 
 
    <div class="three"></div> 
 
</div>

更新：今、それはすべてのブラウザで動作します。