スマホ上で、左右スワイプで次のページに移動させたいです

昔作ったHPをレスポンシブ対応へ修正してるのですが…

複数にわたるページ記事（例:1.html→2.html→3.HTML→4.html）で、
PC閲覧上は下部に←1.html 3ntml→というような移動リンクをつけていますが、
スマホ閲覧上では左右スワイプでも前後ページへ移動できるようにしたいです。
フレーム等は使用していないので、単純にページ全体移動するイメージです。

初心者なのでjQueryプラグインやサンプルなどを探してみたのですが辿り着けずにいます。
良い例や記載方法など教えていただけますとありがたいです！

よろしくお願い申し上げます。

質問者からの補足コメント

• 

  ＞fujillin様　ありがとうございます！
  
  コメントを参考に再度探した結果、イメージに近いコード例を見つけました。
  
  https://miccholy.hatenadiary.org/entry/20140319/ …
  
  こちらの掲載コードのままでアップして確認したのですが、
  横スワイプの時はいいのですがページを縦スクロールをした時にスワイプのタッチ反応してしまうせいか、画面が左右にグラグラします。（動作がなめらかすぎるという印象）
  touchmoveなどの数値を変更すれば防げるのでしょうか…？

    補足日時：2022/11/13 21:06

No.2 回答者： fujillin 回答日時： 2022/11/13 23:08

No1です。

ざっとしか眺めていませんけれど・・

＞縦スクロールをした時にスワイプのタッチ反応してしまうせいか、
＞画面が左右にグラグラします。（動作がなめらかすぎるという印象）
質問者様が考えている対象のHTMLが左右スクロールが必要なものなのか不明ですけれど、ご提示のスクリプトは多分左右スクロールを必要としないものを前提にしているものと思われます。

ただ、（フリックに反応した画面にするためだと思いますが）bodyのCSSでleftを変えて左右に動かしています。
タッチを離した際に、それを戻すためのアニメーションを設定していますので、想像するところそれで「グラグラ」するのでしょう。
また、縦方向のスクロールも最後はゆっくり行うようなアニメーション制御の記述がありますが、10mmsecでのアニメーションなので、それほど効果があるのか疑問です。
（スクリプトの作成者は試しているでしょうから、この方が良いとの判断があるのでしょうけれど）

ご質問の内容から想像すると、縦方向に関しては関係ないのでしょうから、（No1にも書きましたが）そのままページのスクロールに引き渡しておくだけで良いのではないでしょうか？
横方向はどうなさりたいのかにもよりますが、極端に言えば画面の反応はなしにしてしまうとか。
あるいは、敏感に反応しすぎないように、最小値を決めておいて、それ以下なら反応しないようにするとか・・
または、実際の（指の）移動量を割り引いて（＝一定率を掛けて）左右に動かすとか・・
移動量/時間（＝速度）を勘案して反応するようにしておくとか・・
（速度が小さい場合は横方向の動きは無視するなどの意味です）
いろいろやり様はあるのではないかと思います。

試してないのでわかりませんけれど、No1でご紹介したswipeイベントは、そのあたりをそれなりに考慮して、swipeと判断するようになっているのではないかと想像しますけれど・・

No.1 回答者： fujillin 回答日時： 2022/11/11 17:49

こんにちは

当方スマホでテストできる環境がないので、参考ページのみですが・・

こんな感じでしょうか？
https://gray-code.com/javascript/execute-process …
ご質問に関しては、左右を取得すれば良いだけのようですので、Y座標は不要ですね。
どのくらいの時間と移動量で「スワイプ」と判定するかを決めておいて、それを超えたら、次のページへ遷移するようにしておけば宜しいかと。

ゴテゴテ書くのが面倒なら、jQuery Mobile（←もう開発終了ですが）などでも swipeイベントを提供していますので、そのようなライブラリを利用するのが簡単かと思います。
https://api.jquerymobile.com/swipe/


※ 一方で、スマホのブラウザでもスワイプでのページ移動をデフォルトにしつつあるようですので、そちらの機能とのコンフリクトを避けることも必要になるかも知れません。
https://usedoor.jp/howto/web/browser/chrome-swipe/

この回答へのお礼

こんにちは！
とてもわかりやすいアドバイスありがとうございました。
度々ですみません、補足追加したのでご参照いただけますと幸いです。

お礼日時：2022/11/13 21:13