ホームページ > 記事 > ウェブフロントエンド > スクロールバーのスクロール位置を決定するJavaScriptのコード例を詳しく解説
スクロールバーのスクロール位置を決定するJavaScriptのコード例を詳しく解説
- 伊谢尔伦オリジナル
- 2017-07-19 16:06:161026ブラウズ
スクロールバーが指定した位置に達すると、トップに戻るエフェクトが表示されることがよくありますが、それ以外の場合は自動的に非表示になります。この効果を実感すること。
表示領域が実際のページの高さよりも小さい場合、スクロールバーが表示されたと判断します。つまり、
if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll = true;
document.documentElement を使用するには、ページの先頭にステートメントを追加する必要があります:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
実際、このコードは、1 つの問題、つまりブラウザの境界線を考慮していないため、機能しません。ページの offsetHeight を取得するときに、ブラウザーの境界線が含まれます。ブラウザの境界線は 2 ピクセルなので、どのような場合でも clientHeight は常に offsetHeight より小さいため、スクロール バーがない場合でも true になります。 したがって、このエラーを次のように修正する必要があります。 、offsetHeight から 4 ピクセルを減算します。つまり、
if (document.documentElement.clientHeight < document.documentElement.offsetHeight-4){
//执行相关脚本。
}はい、ここではっきりさせておきますが、上記のコードは、一般的に垂直スクロールを判断するものです。
if (document.documentElement.clientWidth < document.documentElement.offsetWidth-4){
//执行相关脚本。
} スクロールバーがページの一番下まで引き込まれたかどうかを判断するには、次のコードを使用できますwindow.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight – (document.documentElement.scrollTop+document.body.scrollTop)-document.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight – document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
} 例 2 オンラインで見つけました。かなりブラウザと互換性があります。奇妙なのは、ドキュメント内に関連情報が見つからなかったことです。コードを投稿してください。 りー
以上がスクロールバーのスクロール位置を決定するJavaScriptのコード例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。