実現したいこと
スクロールバーのボタンを1回押したときに特定のpx分だけ下がって処理が止まり、また1回押したらその場所からまた特定の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」の状態で1回押すと200で止まって画面には「200」を表示、次にもう1回押すと200の位置からなので、今度は「400」が画面に表示される、これを繰り返し処理できるようにしたいです。
どのようにすれば実現できるのか、なぜ自分が書いたコードだと意図した動きにならないのかをご教示いただければと思います。どうぞよろしくお願いいたします。
実行環境
OS:Windows10(21H2)
ブラウザ:Edge(108.0.1462.87)

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/02/25 15:53