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

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

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

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

Q&A

解決済

1回答

515閲覧

PCは横スクロール、スマホは縦スクロールするWEBサイトを作成しています。デバイスの判定について

YuriY

総合スコア33

JavaScript

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

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

jQuery

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

0グッド

0クリップ

投稿2018/07/30 07:03

編集2018/07/30 07:31

マウスのホイール動作で横スクロールするWEBサイトを作成しています。

http://webrocketsmagazine.com/entry/20111114/how-to-scroll-website-holizontal-width-jquery.html
URLを参考に横スクロールするためのコードを以下に作成しました。

$(function() { function scrollTo(to) { $('html, body') .stop() .animate({ scrollLeft: $(to).offset().left }, 500, 'linear'); // jquery.easing.js などのプラグインを入れることでイージングを変更できます } $('.pager').bind('click',function(ev){ scrollTo($(this).attr('href')); }); $('html').mousewheel(function(ev, mov) { if ($('html, body').is(':animated')) { return false; } var page = document.location.hash || '#page1'; var target = null; if (mov > 0) { target = $(page).prev('.page').attr('id'); } else if (mov < 0) { target = $(page).next('.page').attr('id'); } if (target) { scrollTo('#'+target); document.location.hash = '#'+target; } ev.preventDefault(); // 縦スクロールはさせない }); });

このコードに
PC以外は縦スクロールにする処理を追加したいです。

そこで、

$(function() { //ユーザーの端末で条件分岐 $(window).scroll(function () { var ua = navigator.userAgent; if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) { // スマホ用の処理 } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { // タブレット用の処理 } else { // PC用の処理 } }); });

上記を用いて分岐させようとしたのですが横スクロール自体が動作しなくなってしまいました。

function scrollTo(to) { //ユーザーの端末で条件分岐 var ua = navigator.userAgent; if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) { // スマホ用の処理 } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { // タブレット用の処理 } else { // PC用の処理 $('html, body') .stop() .animate({ scrollLeft: $(to).offset().left }, 500, 'linear'); // jquery.easing.js などのプラグインを入れることでイージングを変更できます } $('.pager').bind('click',function(ev){ scrollTo($(this).attr('href')); }); $('html').mousewheel(function(ev, mov) { if ($('html, body').is(':animated')) { return false; } var page = document.location.hash || '#page1'; var target = null; if (mov > 0) { target = $(page).prev('.page').attr('id'); } else if (mov < 0) { target = $(page).next('.page').attr('id'); } if (target) { scrollTo('#'+target); document.location.hash = '#'+target; } ev.preventDefault(); // 縦スクロールはさせない } }); });

どこがおかしいかご指摘いただけませんでしょうか?
よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascriptのコードエラーが出ているはずなので、ブラウザの開発ツールなどで確認してみてください。

javascript

1 function scrollTo(to) { 2 //ユーザーの端末で条件分岐 3 var ua = navigator.userAgent; 4 if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 5 && ua.indexOf('Mobile') > 0) { 6 // スマホ用の処理 7 } else if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { 8 // タブレット用の処理 9 } else { 10 // PC用の処理 11 $('html, body') 12 .stop() 13 .animate({ 14 scrollLeft: $(to).offset().left 15 }, 500, 'linear'); // jquery.easing.js などのプラグインを入れることでイージングを変更できます 16 } 17 $('.pager').bind('click',function(ev){ 18 scrollTo($(this).attr('href')); 19 }); 20 $('html').mousewheel(function(ev, mov) { 21 if ($('html, body').is(':animated')) { 22 return false; 23 } 24 var page = document.location.hash || '#page1'; 25 var target = null; 26 if (mov > 0) { 27 target = $(page).prev('.page').attr('id'); 28 } else if (mov < 0) { 29 target = $(page).next('.page').attr('id'); 30 } 31 if (target) { 32 scrollTo('#'+target); 33 document.location.hash = '#'+target; 34 } 35 ev.preventDefault(); // 縦スクロールはさせない 36 } 37 }); 38 39 40});

コードが、この通りなら、{}の数が合ってないですし、
先頭に$(function() { が付くとしても、(){}
それぞれくくっている範囲がおかしい所があるようです。


質問には関係ないんですが、気になったのでついでに。。。

javascript

1if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 2 && ua.indexOf('Mobile') > 0) { 3}

この条件分岐の書き方、OR と 並列して AND を並べるのはちょっとおかしいです。

iPhoneか、iPodか、Androidかつ、Mobile

これでは、if文が正しく評価されないと思います。

本来、書きたいのはこうじゃないかなー・・?と。

javascript

1if ((ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 ) 2 && ua.indexOf('Mobile') > 0) { 3}

iPhoneか、iPodか、Androidのいずれか
かつ、
Mobile

()が一つ増えただけですが、評価内容の意味が変わります。

投稿2018/07/30 08:44

mix-peach

総合スコア1910

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

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

YuriY

2018/07/30 08:46

なるほど、ありがとうございます! コード確認してみます。
YuriY

2018/07/31 03:30

かっこの位置を見直して、正常に動作することを確認しました。 スマホの処理のところはかっこ変えてません。 今のところ動作しています。 スマホの処理は https://qiita.com/torugatoru/items/2dc895d5db7fc839a8bc このサイトを参考にしました。 ほかにも分岐についてのサイトを確認したのですが、 カッコの位置が疑問ですね・・・ なぜなんでしょうか。 そもそもの質問は解決しましたので、完了させていただきます。 ありがとうございます。
mix-peach

2018/07/31 05:33

解決良かったです! なるほど。。。 || と && は、並列すると、Mobileの時はいつでも trueが帰ってくるのだと思いますが、 条件がそもそもそれで問題ないのであれば、上記の記述のままが正しいのかもです! 私が評価されるべき内容を勘違いしていたんですね・・。紛らわしいお話をしてしまってすみませんでした^^;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問