マウスのホイール動作で横スクロールする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(); // 縦スクロールはさせない } }); });
どこがおかしいかご指摘いただけませんでしょうか?
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/30 08:46
2018/07/31 03:30
2018/07/31 05:33