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