ブログ・お知らせ
# WEB制作技術やツール
ブラウザにスクロールバーが表示されている場合のみjQueryを実行
記事公開日：
最終更新日：
こんにちは。新潟ホームページ制作【マザーシップ】です。
最近、ブラウザのスクロールに応じてエフェクトを与えるjQueryなどが流行っていますが、
そもそもスクロールするだけの縦幅が無いといけないんだなあ(´Д｀；)。
という、しょうもないことに気づいたので、これ系のスクリプトには以下の記述を追加することにしました。
このコードを追加することによって、スクロールできない状態の場合にエフェクトのないプレーンな表示を行うことが可能となります。
コード
jQuery(function() {
//コンテンツの高さ取得
//'container'はコンテンツ全体を囲んでいるID
var cHeight = document.getElementById('container').scrollHeight;
//ブラウザの高さ取得
var bHeight = window.parent.screen.height;
if((cHeight - bHeight) > 0){
//スクロールできる場合の処理をここに記述
}else{
//スクロールできない場合の処理をここに記述
}
});ポイント
スクロールバーが表示されているかどうかを調べるのではなく、
コンテンツの高さーブラウザの高さの計算をすることによってスクロールバーが表示される「状態かどうか」を確認します。
