scrollHeight
スクロール高さは、オーバーフローにより Web ページに表示できない非表示の部分を含む、要素の合計の高さを表します。
scrollWidth
scrollWidth は、オーバーフローにより Web ページに表示できない非表示の部分を含む要素の合計幅を表します。
[注記] ] IE7 - ブラウザの戻り値が不正確です 's
【1】スクロールバーがない場合、scrollHeight 属性と clientHeight 属性は等しく、scrollWidth 属性と clientWidth 属性も等しくなります。
【2】スクロールバーはあるが、要素の幅と高さが以上に設定されている場合 要素内容の幅と高さが等しい場合、スクロール属性とクライアント属性は等しい 属性 [注意]scrollHeight 属性には互換性の問題があります。Chrome および Safari ブラウザでは、scrollHeight に padding-bottom が含まれますが、IE および Firefox には padding-bottom が含まれません<div id="test" ></div><script>//120 120console.log(test.scrollHeight,test.scrollWidth);//120 120console.log(test.clientHeight,test.clientWidth);</script>
<div id="test" > 内容<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>
<div id="test" > 内容</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 の値は 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)
<body ><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>
【注意】負の値を代入する場合理論的には、ページのスクロールは 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 id="test" >
内容</div><button id='btn1'>点击</button><div id="result"></div><script>btn1.onclick = function(){
result.innerHTML = 'scrollTop:' + test.scrollTop+';clientHeight:' + test.clientHeight + ';scrollHeight:' + test.scrollHeight
}</script><div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollTop += 10;}
btn2.onclick = function(){test.scrollTop -= 10;}</script>pageXOffset
pageXOffset は水平方向にスクロールするページのピクセル値を表しますpageYOffset
pageYOffset は、垂直方向にスクロールするページのピクセル値を表します。 [注意] IE8 ブラウザは<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'html的scrollTop:' + document.documentElement.scrollTop +';body的scrollTop:' + document.body.scrollTop;
}</script> </body>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 タイマーを使用します。
<body >
<button id='btn' >回到顶部</button>
<script>function scrollTop(){ if((document.body.scrollTop || document.documentElement.scrollTop) != 0){
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
btn.onclick = scrollTop;</script>
</body>scrollIntoView()
Element.scrollIntoView メソッドは、現在の要素をブラウザの表示領域にスクロールします。
このメソッドはパラメータとしてブール値を受け取ることができます。 true の場合、要素の上部が現在の領域の表示部分の上部と位置合わせされることを意味します (現在の領域がスクロール可能である場合)。false の場合、要素の下部が現在の領域の表示部分の上部と位置合わせされることを意味します。現在の領域の表示されている部分の末尾 (現在の領域がスクロール可能な場合)。このパラメータが指定されていない場合、デフォルトは true<body ><button id='btn1' >点击</button><div id="result" ></div><script>btn1.onclick = function(){
result.innerHTML = 'pageYOffset:' + window.pageYOffset;
}</script> </body>scrollIntoViewIfNeeded()
です。scrollIntoViewIfNeeded(true) メソッドは、現在の要素がビューポート: ブラウザ ウィンドウまたはコンテナ要素が表示されるまでスクロールします。現在の要素がビューポートに表示されている場合、このメソッドは何も行いません。alignCenter パラメータが true に設定されている場合、要素は可能な限りビューポートの垂直方向の中央に表示されます
[注意]このメソッドはchromeとsafariでのみサポートされています<body ><button id='btn' >滚动</button><script>btn.onclick = function(){scrollTo(0,0);}</script>scrollByLines(lineCount)
scrollByLines(lineCount)方法将元素的内容滚动指定的行髙，lineCount值可以是正值， 也可以是负值
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByLines(1);}
btn2.onclick = function(){test.scrollByLines(-1);}</script>scrollByPages(pageCount)
scrollByPages(pageCount)方法将元素的内容滚动指定的页面高度，具体高度由元素的高度决定
[注意]该方法只有safari支持
<div id="test" >
内容</div><button id='btn1'>向下滚动</button><button id='btn2'>向上滚动</button><script>btn1.onclick = function(){test.scrollByPages(1);}
btn2.onclick = function(){test.scrollByPages(-1);}</script>在页面中相应元素发生变化时，scroll事件会在window对象上触发。当然，scroll事件也可以用在有滚动条的元素上
<body ><div id="result" ></div><script>window.onscroll = function(){
result.innerHTML = '页面的scrollTop:' + (document.documentElement.scrollTop||document.body.scrollTop);
}</script> </body>以上がスクロールの見方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
