繰り返しスクロールできるようにしたい

スクロールして最後の要素までいったら、最初の要素に戻るようにして、無限にスクロールできるようにしたいです。

https://codepen.io/KUBOGEN/pen/xxGLGeg
例えば、上記デモの場合だと、ボックス内をスクロールした時に、1→2→3→1→2→3→1→2→3→1→2→3→1 という風にしたいです。

html
1<div class="box">
2  <div class="scroll-list">
3    <div class="scroll-item scroll-item1"><h2>1</h2></div>
4    <div class="scroll-item scroll-item2"><h2>2</h2></div>
5    <div class="scroll-item scroll-item3"><h2>3</h2></div>
6  </div>
7</div>

css
1.box {
2  width: 400px;
3  height: 400px;
4  border: 1px solid #333;
5  overflow: scroll;
6}
7.scroll-item {
8  width: 400px;
9  height: 400px;
10  display: flex;
11  justify-content: center;
12  align-items: center;
13  color: #fff;
14}
15.scroll-item1 {
16  background: red;
17}
18.scroll-item2 {
19  background: green;
20}
21.scroll-item3 {
22  background: blue;
23}

参考：
http://kachibito.net/sample/endless-roop/
http://kachibito.net/web-design/jquery-endless-roop.html

※動きとしてはこのような感じなのですが、画面全体ではなく、ある要素内で行いたいです。

よろしくお願いします。

m.ts10806

2020/03/03 01:35

他明日。？？ひとまずコードは原則、外部サイトではなく質問内に直接ご提示ください。

oikashinoa

2020/03/03 02:24 編集

以下を見たけど質問者の意味が分かりませんでした。 http://kachibito.net/web-design/jquery-endless-roop.html もう少し言いたいことの説明ないですかね？

KUBO3

2020/03/03 02:26

> 上方向も逆にスクロールできれば理想です。 1→3→2→1→3→2→1→3→2→1

行動規範の内容に同意します

回答2件

ベストアンサー

ポチっとしたフリーのツール集 jQuery.flickEndless.js [jQuery]の
縦スクロール　（無限スクロール）のところってかんじですかね？

投稿2020/03/03 03:50

oikashinoa

総合スコア2826

KUBO3

2020/03/03 05:55

おっしゃる通りです。ただ、ボタンを押してではなく、スクロールでできるようにしたいなと思っております。

oikashinoa

2020/03/03 06:01

スマホからなので簡単に。ボタン押す必要は無かったですよ？

KUBO3

2020/03/03 06:21

確認しました。ほんとですね！ PCだとクリックしながらでないとスクロールできないのですが、スマホのようにはできないのでしょうか？

KUBO3

2020/03/03 06:40

別の方法で解決することができました。わかりにくい質問に回答していただいてありがとうございました。

oikashinoa

2020/03/03 06:54

どんな別の方法でやったのか、簡単でもいいので書いてくれるとコチラも参考になるので嬉しいです。こちらももうひとつ案があったので。

KUBO3

2020/03/03 07:57

https://codepen.io/KUBOGEN/pen/xxGLGeg 説明が難しいのですが、囲っている要素と最後の要素の位置が同じ位置になった場合に、最初の要素を最後に追加するようにしてみました。スナップスクロールも併せて実装しています。あまりスマートな方法じゃないかもしれないですが、とりあえず思った動きにはなりました。

行動規範の内容に同意します

方向性違うので分けました。
swiper.jsとかカルーセル系でも行けるかと思います。
navigation(左右の<>)の上下版は無い様なので、出ないようにしたほうが良いかも

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <title>Swiper demo</title>
6  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
7  <!-- Link Swiper's CSS -->
8  <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
9</head>
10<body>
11  <!-- Swiper -->
12  <div class="swiper-container">
13    <div class="swiper-wrapper">
14      <div class="swiper-slide">Slide 1</div>
15      <div class="swiper-slide">Slide 2</div>
16      <div class="swiper-slide">Slide 3</div>
17      <div class="swiper-slide">Slide 4</div>
18      <div class="swiper-slide">Slide 5</div>
19      <div class="swiper-slide">Slide 6</div>
20      <div class="swiper-slide">Slide 7</div>
21      <div class="swiper-slide">Slide 8</div>
22      <div class="swiper-slide">Slide 9</div>
23      <div class="swiper-slide">Slide 10</div>
24    </div>
25    <!-- Add Pagination -->
26    <div class="swiper-pagination"></div>
27    <!-- Add Arrows -->
28    <div class="swiper-button-next"></div>
29    <div class="swiper-button-prev"></div>
30  </div>
31  <!-- Swiper JS -->
32  <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
33
34  <!-- Initialize Swiper -->
35  <script>
36    var swiper = new Swiper('.swiper-container', {
37      direction: 'vertical',
38      slidesPerView: 3,
39      spaceBetween: 30,
40      slidesPerGroup: 1,
41      mousewheelControl: true,
42      freeMode: true,
43      freeModeSticky: true,
44      loop: true,
45      loopFillGroupWithBlank: true,
46      pagination: {
47        el: '.swiper-pagination',
48        clickable: true,
49      },
50      navigation: {
51        nextEl: '.swiper-button-next',
52        prevEl: '.swiper-button-prev',
53      },
54    });
55  </script>
56</body>
57</html>