js は、スクロール バーが page_javascript スキルの最下部または上部に到達したかどうかを判断します。

この記事の例では、スクロール バーがページの下部または上部に到達したかどうかを判断するための js メソッドについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

多くのウェブサイトでトップへ戻るエフェクトが表示されますが、スクロールバーが指定された位置に達しないと自動的に非表示になります。この効果を実感することです。

表示領域がページの実際の高さよりも小さい場合、スクロール バーが表示されると判断されます。

コードをコピー コードは次のとおりです:

if (document.documentElement.clientHeight < document.documentElement.offsetHeight)スクロール = true ;

document.documentElement を使用するには、ページの先頭に宣言を追加する必要があります:

コードをコピー コードは次のとおりです:

実際、このコードは 1 つの問題を考慮していないため機能しません。それは、ページの offsetHeight を取得するときにブラウザの境界線が含まれるため、clientHeight が常に含まれます。これは、スクロール バーがない場合でも 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 //何かをする
}
}

例 2

ネットで見つけました。かなりブラウザと互換性があります。奇妙なのは、ドキュメント内に関連情報が見つからなかったことです。コードを投稿してください。

コードをコピー コードは次のとおりです:

/********************
* ウィンドウのスクロールバーの高さを取得します
******************/
関数 getScrollTop()
{
    varscrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    else if(document.body)
    {
        スクロールトップ=document.body.scrollTop;
    }
    returnscrollTop;
}

/********************
* ウィンドウの可視範囲の高さを取得します
*******************/
関数 getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight = (document.body.clientHeight     }
    それ以外
    {
        var clientHeight = (document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;   
    }
    clientHeight を返します;
}
/********************
* ドキュメントコンテンツの実際の高さを取得します
*******************/
関数 getScrollHeight()
{
    return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
  関数テスト(){
 if (getScrollTop() getClientHeight()==getScrollHeight()){
  alert("到達达底部");
 }その他{
  alert("没有达底部");
 }
}

補足:

DTD が宣言されました:

IE
document.documentElement.scrollHeight ブラウザ内のすべてのコンテンツの高さ、 document.body.scrollHeight ブラウザ内のすべてのコンテンツの高さ
document.documentElement.scrollTop ブラウザのスクロール部分の高さ、 document.body.scrollTop は常に 0
document.documentElement.clientHeight ブラウザの表示部分の高さ、 document.body.clientHeight ブラウザ内のすべてのコンテンツの高さ

FF
document.documentElement.scrollHeight ブラウザ内のすべてのコンテンツの高さ、 document.body.scrollHeight ブラウザ内のすべてのコンテンツの高さ
document.documentElement.scrollTop ブラウザのスクロール部分の高さ、 document.body.scrollTop は常に 0
document.documentElement.clientHeight はブラウザの表示部分の高さ、document.body.clientHeight はブラウザ内のすべてのコンテンツの高さです

クロム
document.documentElement.scrollHeight はブラウザ内のすべてのコンテンツの高さ、document.body.scrollHeight はブラウザ内のすべてのコンテンツの高さです
document.documentElement.scrollTop は常に 0、 document.body.scrollTop ブラウザのスクロール部分の高さ
document.documentElement.clientHeight ブラウザの表示部分の高さ、 document.body.clientHeight ブラウザ内のすべてのコンテンツの高さ

DTD が宣言されていません:

IE
document.documentElement.scrollHeight はブラウザの表示部分の高さ、document.body.scrollHeight はブラウザ内のすべてのコンテンツの高さです
document.documentElement.scrollTop は常に 0、 document.body.scrollTop ブラウザのスクロール部分の高さ
document.documentElement.clientHeight は常に 0、document.body.clientHeight はブラウザの表示部分の高さです

FF
document.documentElement.scrollHeight はブラウザの表示部分の高さ、document.body.scrollHeight はブラウザ内のすべてのコンテンツの高さです
document.documentElement.scrollTop は常に 0、document.body.scrollTop はブラウザのスクロール部分の高さです
document.documentElement.clientHeight はブラウザ内のすべてのコンテンツの高さ、document.body.clientHeight はブラウザの表示部分の高さです

クロム
document.documentElement.scrollHeight はブラウザの表示部分の高さ、document.body.scrollHeight はブラウザ内のすべてのコンテンツの高さです
document.documentElement.scrollTop は常に 0、document.body.scrollTop はブラウザのスクロール部分の高さです
document.documentElement.clientHeight はブラウザ内のすべてのコンテンツの高さ、document.body.clientHeight はブラウザの表示部分の高さです

ブラウザ内のすべてのコンテンツの高さは、ブラウザのフレーム全体の高さです。これには、スクロール バーが展開されている部分、表示されている部分、下部の非表示部分の高さの合計が含まれます。

ブラウザのスクロール部分の高さはスクロール バーの高さであり、オブジェクト全体の上部からの視覚的な上部の高さです。
上記のパラメータを理解すると、IE、FF、Chrome ブラウザと互換性のあるスクロール効果を作成できます。

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。