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

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

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

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

Q&A

2回答

822閲覧

jQuery:スクロール上下の判定 IE11での崩れについて

usasa

総合スコア0

jQuery

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

0グッド

0クリップ

投稿2020/10/01 05:48

前提・実現したいこと

jQueryを使用して、画面でスクロールした方向が上下どちらか判定したいと思い、下記のコードを挿入しました。

下にスクロールしたときにコンソールに「down」を表示、
上にスクロールしたときにコンソールに「up」を表示の想定です。

jQuery

1var start_pos = 0; 2$(window).scroll(function(e){ 3 var current_pos = $(this).scrollTop(); 4 if (current_pos > start_pos) { 5 console.log('down'); 6 } else { 7 console.log('up'); 8 } 9 start_pos = current_pos; 10});

発生している問題・エラーメッセージ

chrome、firefox、edgeでは思ったとおりの表示になるのですが、
IE11で下にスクロールした際「up」と表示されてしまいます。

原因

検証したところ、スクロールを止めた時点で current_pos と start_pos が同じ値になってしまうのが原因のようでした。
scrollTop() で2~3回同じ値が取れているようです。

どのように調整するのが良いか、ご教授いただけないでしょうか。

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

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

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

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

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

Jon_do

2020/10/01 08:55

恐らく、下記の方法で解決するとは思いますがjqueryに関する質問をする場合は使用しているjqueryのバージョンが必要です。
guest

回答2

0

実験しました
scrolldownやscrollupの再、最少最大を超えたスクロールの場合でもスクロールイベントが発生していました。
よって以下の条件だけ入れて確認単純な意味での'up''down'は正常検知されるようになりました。

Javascript

1var start_pos = 0; 2$(window).scroll(function(e){ 3 var current_pos = $(this).scrollTop(); 4 if (current_pos > start_pos) { 5 console.log('down'); 6 } else if (current_pos < start_pos) { //条件追加 7 console.log('up'); 8 } 9 start_pos = current_pos; 10});

投稿2020/10/01 06:22

kuma_kuma_

総合スコア2506

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

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

0

javascript

1 var start_pos = 0; 2 3 $(window).scroll(function(e){ 4 current_pos=window.pageYOffset ||document.documentElement.scrollTop; 5 var diff=current_pos -start_pos; 6 if(diff!==0) console.log(diff>0?'down':'up'); 7 start_pos = current_pos; 8 });

投稿2020/10/01 06:14

yambejp

総合スコア116724

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問