###解決したいこと
トップページボタンのスクロールに上下方向でボタンが表示したり非表示にしたりするスクリプトを実装したのですが、パソコンのブラウザでは問題なく動作するのですがiPhoneのブラウザになると挙動が不安定になり、点滅のような状態になる場合があります。iPhoneブラウザで安定させて表示するようにするにはどうしたらよいでしょうか。
###jQuery
上へスクロールするとトップボタンが表示されます。(ただし500pxより小さくなると表示は消えるようにしています)
下へスクロールするとトップボタンが消えます。
<!--topボタンスクール上下の表示、非表示--> var topBtn = $('#top-btn'); topBtn.hide(); var startPos = 0; $(window).scroll(function(){ var currentPos = $(this).scrollTop(); if(currentPos > startPos){ topBtn.fadeOut(); } else { if($(window).scrollTop() < 500){ topBtn.fadeOut(); } else { topBtn.fadeIn(); } } startPos = currentPos; });
###追記(jQuery)
http://qiita.com/tonkotsuboy_com/items/d32ec6e7a1f6f592d415
上記のサイトにてiPhoneサファリでのios8のスクロールリサイズのキャンセルするコードを追加記述したのですが、iPhoneブラウザでのみうまく動作してくれません。トップボタンが点滅して挙動が不安定です。
上記の参考サイトで横幅、画面回転のときのみリサイズが対応するコード2つを試したのですがどちらも動作の状態は同じです。。
横幅のリサイズアラートはちゃんと動作してくれています。
おそらくこのiPhoneブラウザのスクロールリサイズが原因なのではないかと思うのですが、別の原因など考えられるところがあれば教えてください。
ちなみにサイトurlをのっけておきますので、iPhoneでどういう状態か確認できる方は見てみてください。
http://jikkyo-webdesigner.top/
<!--ウインドウの横幅を保持--> var currentWidth = window.innerWidth; window.addEventListener("resize", function() { if (currentWidth == window.innerWidth) { <!--ウインドウ横幅が変わっていないため処理をキャンセル。--> return; } <!--ウインドウ横幅が変わったのでリサイズと見なす。--> <!--横幅を更新--> currentWidth = window.innerWidth; alert("ウインドウがリサイズしました。"); });
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/18 14:35 編集
2016/12/19 00:29