scrollの動きを１回だけとしたい

実現したいこと

スクロールバーのボタンを１回押したときに特定のpx分だけ下がって処理が止まり、また１回押したらその場所からまた特定のpx分だけ下がって止まる処理を実現させようとして、下記のようなコードを書きました。

書いたコード

html
1<!DOCTYPE html>
2<head>
3  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
5</head>
6 
7<body>
8  <p>ボタン押下時の上からのスクロール位置：<span id="scroll-amount">0 px</span></p>
9  <div id="scroll-box">
10    <div id="scroll-contents">スクロール縦幅1000px</div>
11  </div>
12</body>
13 
14<style>
15#scroll-box {
16  overflow: scroll;
17  height: 100px;
18  border: 1px solid black;
19}
20 
21#scroll-contents {
22  height: 1000px;
23}
24</style>
25 
26<script>
27$(function() {
28  $('#scroll-box').scroll(function() {
29
30    // 現在位置を取得
31    var currentScrollTop = $(this).scrollTop();
32
33    // 調整後の位置
34    var adjScrollTop = 0;
35
36    // 現在位置に200px追加する
37    adjScrollTop = currentScrollTop + 200;
38    $(this).scrollTop(adjScrollTop);
39    
40    // 追加後の位置を画面に表示させる
41    $('#scroll-amount').text($(this).scrollTop() + 'px');
42
43  });
44});
45</script>
46</html>
47コード

発生しているエラー

最初にスクロールバーのボタンを押すと、現在位置すなわち0px部分から200pxを追加しているので、画面上には「200」と表示されることを期待したが、実際には「917」と表示されました。

確認したこと

開発者ツールを使ってデバッグ実行させてみたところ、現在位置が下のように変化していることが確認出来ました。
0→210→410→610→821→1021→1117（ここで処理終了）

質問

なぜこのような動きをするのでしょうか？1000px分しか用意していない（と自分では思っています）が、1117まで行ってしまう理由もわかりません。

最終的に実現したいことは、「0」の状態で１回押すと200で止まって画面には「200」を表示、次にもう１回押すと200の位置からなので、今度は「400」が画面に表示される、これを繰り返し処理できるようにしたいです。

どのようにすれば実現できるのか、なぜ自分が書いたコードだと意図した動きにならないのかをご教示いただければと思います。どうぞよろしくお願いいたします。

実行環境

OS：Windows10(21H2)
ブラウザ：Edge(108.0.1462.87)

回答2件

ベストアンサー

マークダウンを使いたいので新たな回答として投稿します。

トリッキーな方法ですが、作ってみました。

スクロールバーを別の要素にしてスクロール対象の要素と重なるように表示する。
（Chromeでは）1クリックで40pxスクロールするので、最大180pxスクロールするようにして、その値を5倍する。

※横スクロールバーは非表示にしました。

html
1<!DOCTYPE html>
2<head>
3  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
4  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
5</head>
6 
7<body>
8  <p>ボタン押下時の上からのスクロール位置：<span id="scroll-amount">0 px</span></p>
9  <div id="parent">
10    <div id="scroll-box">
11      <div id="scroll-contents">スクロール縦幅1000px</div>
12    </div>
13    <div id="scroll-box2">
14      <div id="scroll-contents2"></div>
15    </div>
16  </div>
17</body>
18 
19<style>
20#parent {
21  position: relative;
22}
23
24#scroll-box {
25  overflow: hidden visible;
26  height: 100px;
27  border: 1px solid black;
28}
29 
30#scroll-contents {
31  height: 1000px;
32}
33
34#scroll-box2 {
35  position: absolute;
36  top: 0;
37  width: 100%;
38  overflow: hidden visible;
39  height: 100px;
40  border: 1px solid black;
41}
42 
43#scroll-contents2 {
44  height: 280px;
45}
46</style>
47 
48<script>
49$(function() {
50  $('#scroll-box').scroll(function() {
51    // 追加後の位置を画面に表示させる
52    $('#scroll-amount').text($(this).scrollTop() + 'px');
53  });
54
55  $('#scroll-box2').scroll(function() {
56
57    // 現在位置を取得
58    var currentScrollTop = $(this).scrollTop();
59
60    // 調整後の位置
61    var adjScrollTop = 0;
62
63    // 現在位置を5倍する
64    adjScrollTop = currentScrollTop * 5;
65    $('#scroll-box').scrollTop(adjScrollTop);
66  });
67});
68</script>
69</html>

ブラウザにより挙動が変わりそうですが、よかったら参考にしてください。

投稿2023/02/24 02:49

gosaro

総合スコア22

回答へのコメント

siebzehn

2023/02/25 15:53

回答ありがとうございます。仕事の都合とはいえ、またお礼のあいさつが遅くなり大変申し訳ございません。こんな手段で出来ることは知りませんでした。当方、Ｃｈｒｏｍｅで作業してますが実現はできました。他のブラウザでどこまで出来るかはまだ未確認ですが、自分の実現したいことが進み感謝しております。どうもありがとうございました。