ブラウザにスクロールバーが表示されている場合のみjQueryを実行

記事公開日:
最終更新日:

こんにちは。新潟ホームページ制作【マザーシップ】です。

最近、ブラウザのスクロールに応じてエフェクトを与えるjQueryなどが流行っていますが、

そもそもクロールするだけの縦幅が無いといけないんだなあ(´Д`;)。

という、しょうもないことに気づいたので、これ系のスクリプトには以下の記述を追加することにしました。

このコードを追加することによって、スクロールできない状態の場合にエフェクトのないプレーンな表示を行うことが可能となります。

コード

jQuery(function() {
//コンテンツの高さ取得
//'container'はコンテンツ全体を囲んでいるID
var cHeight = document.getElementById('container').scrollHeight;
//ブラウザの高さ取得
var bHeight = window.parent.screen.height;		
if((cHeight - bHeight) > 0){
//スクロールできる場合の処理をここに記述
}else{
//スクロールできない場合の処理をここに記述
}
});

ポイント

スクロールバーが表示されているかどうかを調べるのではなく、

コンテンツの高さーブラウザの高さの計算をすることによってスクロールバーが表示される「状態かどうか」を確認します。





ページの先頭へ