勉強したことのメモ

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

  関連記事

jQueryで偶数or奇数行に任意のClassを付与する方法
jQueryで偶数or奇数行に任意のClassを付与する方法

tableタグの1行目を除く偶数もしくは奇数行のtrタグに任意にClassを指定 ...

FullCalendarでラベルごとに表示・非表示を切り替える方法
FullCalendarでラベルごとに表示・非表示を切り替える方法

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

テキストエリアを選択すると中身を全選択状態にする方法
テキストエリアを選択すると中身を全選択状態にする方法

テキストエリアやテキストボックスの中に文字が書いてあり、ドラッグをしなくても、そ ...

jQueryでimgタグのsrcを変える
jQueryでimgタグのsrcを変える

やりたかった事はイベントに応じてimgタグの src内のURLを変更。attrを ...

videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法

Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...