スクロールの見方

スクロールの幅と高さ

scrollHeight

スクロール高さは、オーバーフローにより Web ページに表示できない非表示の部分を含む、要素の合計の高さを表します。

scrollWidth

scrollWidth は、オーバーフローにより Web ページに表示できない非表示の部分を含む要素の合計幅を表します。

[注記] ] IE7 - ブラウザの戻り値が不正確です 's

【1】スクロールバーがない場合、scrollHeight 属性と clientHeight 属性は等しく、scrollWidth 属性と clientWidth 属性も等しくなります。

【2】スクロールバーはあるが、要素の幅と高さが以上に設定されている場合 要素内容の幅と高さが等しい場合、スクロール属性とクライアント属性は等しい 属性

[注意]scrollHeight 属性には互換性の問題があります。Chrome および Safari ブラウザでは、scrollHeight に padding-bottom が含まれますが、IE および Firefox には padding-bottom が含まれません

<div></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>

ページ サイズ

document.documentElement.clientHeight はページの表示領域のサイズを表し、document.documentElement.scrollHeight は html 要素コンテンツの実際のサイズを表します。ただし、ブラウザごとに性能が異なるため、以下の状況に分けられます。

【1】HTML要素にスクロールバーがない場合、IEとFirefoxのclient属性とscroll属性は常に; Safari と Chrome は通常どおり動作し、clientHeight は表示領域のサイズを返し、scrollHeight は要素コンテンツのサイズを返します

<div>
    内容<br>内容<br>
</div><script>//103(120-17) 103(120-17)console.log(test.scrollHeight,test.scrollWidth);//103(120-17) 103(120-17)console.log(test.clientHeight,test.clientWidth);</script>

[2] html の場合要素にスクロール バーがある場合、すべてのブラウザは通常どおり動作します。 clientHeight はビューポート領域のサイズを提供し、scrollHeight は要素コンテンツのサイズを提供します。 要素

<div>
    内容</div><script>//chrome/safari:220(200+10+10)//firefox/IE:210(200+10)console.log(test.scrollHeight);//103(120-17)console.log(test.clientHeight);</script>

スクロール長

scrollTop

スクロールトップ属性を取得する必要があります。コンテンツ領域の上に隠れているピクセルの数を示します。要素がスクロールされていない場合、scrollTop の値は 0 です。要素が垂直にスクロールされる場合、scrollTop の値は 0 より大きく、要素の上にある非表示のコンテンツのピクセル幅を表します

scrollLeft

scrollLeft プロパティは、コンテンツ領域の左側に隠れているピクセル数を示します。要素がスクロールされていない場合、scrollLeft の値は 0 です。要素が水平にスクロールされる場合、scrollLeft の値は 0 より大きく、要素の左側にある非表示のコンテンツのピクセル幅を表します

スクロールバーがコンテンツの一番下までスクロールする場合、次の式に従います

//firefox:  755 755//chrome:   947 8(body元素的margin)//safari:   744 8(body元素的margin)//IE:       768 768console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)

<script>//firefox:  755 1016(1000+8*2)//chrome:   947 1016(1000+8*2)//safari:   744 1016(1000+8*2)//IE:       768 1016(1000+8*2)console.log(document.documentElement.clientHeight,document.documentElement.scrollHeight)</script>

プロパティscrollHeight、scrollWidthと異なり、scrollLeft、scrollTopは書き込み可能です

【注意】負の値を代入する場合理論的には、ページのスクロールは document.documentElement.scrollTop および document.documentElement.scrollTop によって反映および制御できます。ただし、Chrome および Safari ブラウザは document.body を使用します。scrollTop とscrollLeft は

var docHeight = Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);var docWidth  = Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth);

によって制御されます。したがって、ページのスクロール高さの互換性は

scrollHeight == scrollTop  + clientHeight

として記述されます。 the top

これは、scrollTop を使用することで実現できます。 先頭に戻る function

<div>
    内容</div><button>点击</button><div></div><script>btn1.onclick = function(){
    result.innerHTML = &#39;scrollTop:&#39; + test.scrollTop+&#39;;clientHeight:&#39; + test.clientHeight + &#39;;scrollHeight:&#39; + test.scrollHeight
}</script>

<div>
    内容</div><button>向下滚动</button><button>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>

ページ全体のスクロールのピクセル値を取得できる window の読み取り専用プロパティが 2 つあります。 、それらは pageXOffset と pageYOffset

pageXOffset

pageXOffset は水平方向にスクロールするページのピクセル値を表します

pageYOffset

pageYOffset は、垂直方向にスクロールするページのピクセル値を表します。

[注意] IE8 ブラウザは

<button>点击</button><div></div><script>btn1.onclick = function(){
    result.innerHTML = &#39;html的scrollTop:&#39; + document.documentElement.scrollTop +&#39;;body的scrollTop:&#39; + document.body.scrollTop;
}</script>    

スクロール メソッドをサポートしていません

scrollTo(x,y)

scrollTo(x,y) メソッドは、現在ウィンドウに表示されているドキュメントをスクロールします。ドキュメント内の座標 x と y で指定された点を次の位置に置きます。表示領域の左上隅

var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop

scrollBy(x,y)

scrollBy( x, y) メソッドは、現在のウィンドウに表示されているドキュメントをスクロールします。 x と y は相対的なスクロール量を指定します。

function scrollTop(){    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}

[小規模アプリケーション]

シンプルかつ高速なスクロール関数を実現するには、scrollBy() と setInterval タイマーを使用します。

<button>回到顶部</button>
<script>function scrollTop(){    if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
        document.body.scrollTop = document.documentElement.scrollTop = 0;
    }
}
btn.onclick = scrollTop;</script>

scrollIntoView()

Element.scrollIntoView メソッドは、現在の要素をブラウザの表示領域にスクロールします。

このメソッドはパラメータとしてブール値を受け取ることができます。 true の場合、要素の上部が現在の領域の表示部分の上部と位置合わせされることを意味します (現在の領域がスクロール可能である場合)。false の場合、要素の下部が現在の領域の表示部分の上部と位置合わせされることを意味します。現在の領域の表示されている部分の末尾 (現在の領域がスクロール可能な場合)。このパラメータが指定されていない場合、デフォルトは true

<button>点击</button><div></div><script>btn1.onclick = function(){
    result.innerHTML = &#39;pageYOffset:&#39; + window.pageYOffset;
}</script>    

scrollIntoViewIfNeeded()

です。scrollIntoViewIfNeeded(true) メソッドは、現在の要素がビューポート: ブラウザ ウィンドウまたはコンテナ要素が表示されるまでスクロールします。現在の要素がビューポートに表示されている場合、このメソッドは何も行いません。

alignCenter パラメータが true に設定されている場合、要素は可能な限りビューポートの垂直方向の中央に表示されます

[注意]このメソッドはchromeとsafariでのみサポートされています

<button>滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>

scrollByLines(lineCount)

　　scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值

　　[注意]该方法只有safari支持

<div>
    内容</div><button>向下滚动</button><button>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>

scrollByPages(pageCount)

　　scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定

　　[注意]该方法只有safari支持

<div>
    内容</div><button>向下滚动</button><button>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>

滚动事件

在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上

<div></div><script>window.onscroll = function(){
    result.innerHTML = &#39;页面的scrollTop:&#39; + (document.documentElement.scrollTop||document.body.scrollTop);
}</script>    

以上がスクロールの見方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。