勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

ブラウザのSafariのみスクロール関連のイベントが発火しない場合の対応方法

   2024/02/20  jQuery

jQueryで一定距離スクロールさせた場合に発火するイベントをプログラムしていたが、IE / Chrome / Firefoxだと正常に動作するのにSafariのみ動作しないという症状が発生した。jQueryの書き方によってはSafariのみスクロール距離を正常に取得できないっぽい。以下に原因と対策をメモ。

 

原因

以下のような形でスクロールした距離を取得しようとしたが、この書き方だとsafariではスクロール量を取得できない模様。

var hoge = $('body,html').scrollTop();

 

対策

以下に変更する。

var hoge = $(window).scrollTop();

 

参考サイト

http://d.hatena.ne.jp/cyokodog/20090112/jQueryPositionSize03

「位置情報の取得結果を比較してみる」というところに詳しく載っている。

 - jQuery

  関連記事

tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法
tableのtd内にあるcheckboxのクリック範囲を拡大させ、チェック時に親要素であるtdにCSSを割り当てる方法

tableのtd内にcheckboxを設置し、td部分をクリックすることでche ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

formでファイルを選択した際にファイル名やサイズ、形式を調べる方法
formでファイルを選択した際にファイル名やサイズ、形式を調べる方法

フォームで画像などをアップロードする際に「ファイルサイズが大きすぎないか?」「拡 ...

summernote(WYSIWYGエディタ)の設置方法と日本語化対応
summernote(WYSIWYGエディタ)の設置方法と日本語化対応

あるシステムにWYSIWYGエディタを実装したかった。以前にメモしたCKEdit ...

スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)
スワイプ・フルスクリーン・サムネイル対応のjQuery画像ビューア(Fotorama)

タブレット&スマホでの閲覧が想定されているページで、スワイプ・サムネイル・フルス ...