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

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

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

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

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

コード

jQuery(function() {

//コンテンツの高さ取得
//'container'はコンテンツ全体を囲んでいるID
var cHeight = document.getElementById('container').scrollHeight;
//ブラウザの高さ取得
var bHeight = window.parent.screen.height;		

if((cHeight - bHeight) > 0){

//スクロールできる場合の処理をここに記述

}else{

//スクロールできない場合の処理をここに記述

}

});

ポイント

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

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

この記事をシェア