質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

852閲覧

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

siebzehn

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

2クリップ

投稿2023/02/06 13:04

実現したいこと

スクロールバーのボタンを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)

shinoharat👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

  1. スクロールバーを別の要素にしてスクロール対象の要素と重なるように表示する。
  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

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siebzehn

2023/02/25 15:53

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

0

大きく分けて2つ問題があります。

1.1クリックで何度も scroll イベントが発生する。

これはブラウザによって挙動が異なるかもしれませんが、Chrome で確認するとそうなります。

2.scrollTop を設定することで scroll イベントが発生する。

scroll イベントはスクロールバーのボタンクリックイベントではありません。
スクロールが発生したときのイベントであり、その中には scrollTop による設定も含まれます。
scroll イベントで scrollTop を変更すると、末端に達するまで scroll イベントが発生し続けます。

以上を踏まえたうえで目的を実現する方法ですが、確実なのはスクロールバーを使わずに自前のボタンでスクロールすることです。
CSS か何かの設定でスクロール量を変更できれば一番よいですが、軽く調べた範囲ではわかりませんでした。

投稿2023/02/21 07:13

gosaro

総合スコア24

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

siebzehn

2023/02/23 14:33

回答ありがとうございます。 またお礼のあいさつが遅くなり申し訳ございません。 調査いただきお手数おかけして申し訳ないです。 しかし、実現方法のハードル高そうですね。 自分でもいろいろと調べてはいるのですが 妙案が浮かばず、という感じです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問