要素を無限スクロールできるようにする

要素を無限スクロールできるようにしたいと思って色々調べましたが、あまり情報がなく、何とか自力で実装したのでメモっておきます。

無限スクロールについて調べると、要素が次々と表示される無限スクロールについての情報ばかり出てくるんですよね。

でも今回実装したかったのは、新しい要素を次々と表示させるのではなく、リストなどの要素を繰り返し表示させるというものです。

例えば3つの要素があったとして、「要素1→要素2→要素3→要素1→要素2→要素3→要素1」みたいな感じで、最後の要素の次に最初の要素が表示されるように、ループさせるというもの。

一応、以下が自力で実装したものです。

See the Pen
scroll-roop by KUBO (@KUBOGEN)
on CodePen.

HTML
<div class=”box”>
　<div class=”scroll-list”>>
　　<div class=”scroll-item scroll-item1″><h2>1</h2></div>
　　<div class=”scroll-item scroll-item2″><h2>2</h2></div>
　　<div class=”scroll-item scroll-item3″><h2>3</h2></div>
　</div>
</div>

CSS
.box {
　width: 400px;
　height: 400px;
　border: 1px solid #333;
　overflow: auto;
　scroll-snap-type: y mandatory;
　box-sizing: border-box;
}
.scroll-list {
　width: 100%;
　height: 100%;
}
.scroll-item {
　width: 400px;
　height: 400px;
　display: flex;
　justify-content: center;
　align-items: center;
　color: #fff;
　scroll-snap-align: start;
}
.scroll-item1 {
　background: red;
}
.scroll-item2 {
　background: green;
}
.scroll-item3 {
　background: blue;
}

jQuery
$(function(){
　$(‘.box’).scroll(function() {
　　box_offset = $(‘.box’).offset().top;
　　item_offset = $(‘.scroll-item:last-child’).offset().top;
　　if ( box_offset == item_offset ) {
　　　$(‘.scroll-list’).append($(‘.scroll-item:first-child’));
　　}
　});
});

まずboxクラスがついている表示領域のdiv要素の位置と、最後の要素の位置を取得。

box_offset = $(‘.box’).offset().top;
item_offset = $(‘.scroll-item:last-child’).offset().top;

そして、それらの位置が同じ場合は、scroll-listに最初の要素を追加します。

if ( box_offset == item_offset ) {
　$(‘.scroll-list’).append($(‘.scroll-item:first-child’));
}

していることはこの2つだけ。

なお、スクロールした際に表示領域にピタッと止まる、スナップスクロールも併せて実装しています。

少し不安定ですし、これはあまりスマートなやり方ではないだろうと思いますが、他に情報が全然なかったので、とりあえず備忘録として残しておきます。

もっと良い方法あったら教えてください。

Leave a Comment X