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

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

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

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

jQuery

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

Q&A

解決済

1回答

879閲覧

タッチデバイスでのスクロール方向の判定について

opatani

総合スコア13

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/11/14 09:31

編集2018/11/16 06:04

前提・実現したいこと

タッチデバイスでのスクロール方向の判定を取得したく
調べながら色々試したのですがうまく動くものが見つかりませんでした。
最終的に下記記述でchromeの検証では動くのですが、実機(ipad,iphone)では動いていませんでした。
処理が全く変わっても大丈夫ですので、どなたかご教授いただけますでしょうか。
少ない情報で申し訳ないですが、よろしくお願いいたします。

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

chromeのコンソールエラーなし 実機のみ動作しない

該当のソースコード

$(window).load(function(){ //スマホのタッチスクロール方向の判定。 window.addEventListener("load", function(event) { var touchStartX; var touchStartY; var touchMoveX; var touchMoveY;   // 開始時 window.addEventListener("touchstart", function(event) { // 座標の取得 touchStartX = event.touches[0].pageX; touchStartY = event.touches[0].pageY; }, false);   // 移動時 window.addEventListener("touchmove", function(event) { // 座標の取得 touchMoveX = event.changedTouches[0].pageX; touchMoveY = event.changedTouches[0].pageY; }, false);   // 終了時 window.addEventListener("touchend", function(event) { // 移動量の判定 if (touchStartY > touchMoveY) { if (touchStartY > (touchMoveY + 50)) { alert('下向きにスクロールした場合'); } } else if (touchStartY < touchMoveY) { if ((touchStartY + 50) < touchMoveY) { alert('上向きにスクロールした場合'); } } }, false); }, false); });

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

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

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

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

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

guest

回答1

0

ベストアンサー

素直にscrollイベントで取得するのはどうでしょうか?

javascript

1 $(function() { 2 var before = $(window).scrollTop(); 3 var after; 4 $(window).scroll(function() { 5 after = $(window).scrollTop(); 6 }); 7 $(window).on("touchend" ,function(){ 8 if(before -10 > after) {//数字はタッチして少しだけ動いてしまった場合のマージン 9 //上スクロールした時の処理 10 alert('上向きにスクロールした場合'); 11 } 12 else if(before +10 < after) {//数字はタッチして少しだけ動いてしまった場合のマージン 13 //下スクロールした時の処理 14 alert('下向きにスクロールした場合'); 15 } 16 }); 17 });

上記の例では

if (touchStartY > touchMoveY && $('body').hasClass('scrollCan') && !$(sceneLast).hasClass('sceneNow')) {}
が何の判定かわからなかったので省いています。

投稿2018/11/16 05:59

colling

総合スコア798

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

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

opatani

2018/11/16 06:06

こういった方法もあるのですね!盲点でしたありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問