昔作ったHPをレスポンシブ対応へ修正してるのですが…
複数にわたるページ記事(例:1.html→2.html→3.HTML→4.html)で、
PC閲覧上は下部に←1.html 3ntml→というような移動リンクをつけていますが、
スマホ閲覧上では左右スワイプでも前後ページへ移動できるようにしたいです。
フレーム等は使用していないので、単純にページ全体移動するイメージです。
初心者なのでjQueryプラグインやサンプルなどを探してみたのですが辿り着けずにいます。
良い例や記載方法など教えていただけますとありがたいです!
よろしくお願い申し上げます。
A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
No1です。
ざっとしか眺めていませんけれど・・
>縦スクロールをした時にスワイプのタッチ反応してしまうせいか、
>画面が左右にグラグラします。(動作がなめらかすぎるという印象)
質問者様が考えている対象のHTMLが左右スクロールが必要なものなのか不明ですけれど、ご提示のスクリプトは多分左右スクロールを必要としないものを前提にしているものと思われます。
ただ、(フリックに反応した画面にするためだと思いますが)bodyのCSSでleftを変えて左右に動かしています。
タッチを離した際に、それを戻すためのアニメーションを設定していますので、想像するところそれで「グラグラ」するのでしょう。
また、縦方向のスクロールも最後はゆっくり行うようなアニメーション制御の記述がありますが、10mmsecでのアニメーションなので、それほど効果があるのか疑問です。
(スクリプトの作成者は試しているでしょうから、この方が良いとの判断があるのでしょうけれど)
ご質問の内容から想像すると、縦方向に関しては関係ないのでしょうから、(No1にも書きましたが)そのままページのスクロールに引き渡しておくだけで良いのではないでしょうか?
横方向はどうなさりたいのかにもよりますが、極端に言えば画面の反応はなしにしてしまうとか。
あるいは、敏感に反応しすぎないように、最小値を決めておいて、それ以下なら反応しないようにするとか・・
または、実際の(指の)移動量を割り引いて(=一定率を掛けて)左右に動かすとか・・
移動量/時間(=速度)を勘案して反応するようにしておくとか・・
(速度が小さい場合は横方向の動きは無視するなどの意味です)
いろいろやり様はあるのではないかと思います。
試してないのでわかりませんけれど、No1でご紹介したswipeイベントは、そのあたりをそれなりに考慮して、swipeと判断するようになっているのではないかと想像しますけれど・・
No.1
- 回答日時:
こんにちは
当方スマホでテストできる環境がないので、参考ページのみですが・・
こんな感じでしょうか?
https://gray-code.com/javascript/execute-process …
ご質問に関しては、左右を取得すれば良いだけのようですので、Y座標は不要ですね。
どのくらいの時間と移動量で「スワイプ」と判定するかを決めておいて、それを超えたら、次のページへ遷移するようにしておけば宜しいかと。
ゴテゴテ書くのが面倒なら、jQuery Mobile(←もう開発終了ですが)などでも swipeイベントを提供していますので、そのようなライブラリを利用するのが簡単かと思います。
https://api.jquerymobile.com/swipe/
※ 一方で、スマホのブラウザでもスワイプでのページ移動をデフォルトにしつつあるようですので、そちらの機能とのコンフリクトを避けることも必要になるかも知れません。
https://usedoor.jp/howto/web/browser/chrome-swipe/
こんにちは!
とてもわかりやすいアドバイスありがとうございました。
度々ですみません、補足追加したのでご参照いただけますと幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- SEO googleサーチコンソールでの重複ページ(ダブルスラッシュ) 3 2023/06/12 15:00
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- PDF PDF閲覧で 各ページの特定部分だけを表示する方法はありますか? 例えば 右下のページだけを確認した 2 2023/02/27 16:01
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
- Excel(エクセル) エクセルで 同じシートにある2ページに、おなじページをつけたい 3 2022/07/11 16:15
- Word(ワード) Word2013 縦書き上下二段の表、改行を続けると次ページに情報が表示されるようにしたい 3 2022/06/16 09:24
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- HTML・CSS htmlで画面遷移させたい 1 2022/10/28 18:19
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
親フレームのURLによって、...
-
親フレームからkeydownイベント...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
getElementsByNameで要素が取得...
-
bodyにidをつける理由は何ですか?
-
特定のページから移動してきた...
-
特定のウィンドウ名を持つウィ...
-
ページ全体を検索して特定文字...
-
javascriptでalertの文字列をコ...
-
JavaScriptの外部ファイル読み込み
-
JavaScriptでiframeの内容を「...
-
Dreamweaver で 外部JSを読み込...
-
ブラウザをJavaScriptで最小化…
-
JavaScriptからVBScriptの呼び...
-
条件分岐で、読み込む外部スク...
-
引数の数によって関数の動作を...
-
チェックボックスの選択パター...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スマホ上で、左右スワイプで次...
-
インラインフレームで表示され...
-
インラインフレームをドラッグ...
-
HTMLでサブフレームから親のス...
-
フレームを跨ぐドロップダウン...
-
jqueryを利用してインラインフ...
-
別ページのインラインフレーム...
-
親ウィンドウの別フレームを子...
-
openerは使えないのでしょうか?
-
フレーム内のiframeのデータの...
-
フレームで隠れるポップ
-
ブラウザのURLアドレス文字表記...
-
フレーム分割領域のサイズを変...
-
エラー:書き込みができません ...
-
フレームのあるHPでプルダウン...
-
HTMLフォームボタンによるター...
-
別フレームのページが読み込み...
-
Javaでテトリスを作っています。
-
複数のページ(html)のvalueを...
-
URLを引数とし、フレーム間で渡...
おすすめ情報
>fujillin様 ありがとうございます!
コメントを参考に再度探した結果、イメージに近いコード例を見つけました。
https://miccholy.hatenadiary.org/entry/20140319/ …
こちらの掲載コードのままでアップして確認したのですが、
横スワイプの時はいいのですがページを縦スクロールをした時にスワイプのタッチ反応してしまうせいか、画面が左右にグラグラします。(動作がなめらかすぎるという印象)
touchmoveなどの数値を変更すれば防げるのでしょうか…?