1024おめでとうございますscrollTopを語るために必要なピット

7415 ワード

JavaScript js。 scroll scrollTop scrollTo

開始する前に、scrollToとscrollTopをはっきり区別する必要があります.
one穴
1.ブラウザのscrollTopを設定する
ユーザ操作でスクロールを設定するか、またはsetTimeoutでスクロールを延期したほうがいいです.

// Chrome Safari    
window.scrollTo(x, y)；

MDNの説明が確認できます.
2.元素scrollTopを設定する

// Chrome Safari     
//   ：    
//   ：  y   100
<script>
    let obox = document.getElementById("box");
    obox.scrollTo(0, 100); 
</script>

同前
1.ブラウザのscrollTop値を取得する

// Chrome 
//   1：                    
//   1：  0

//   2：           500 
//   2：     500
<script>
	var scroll_top = document.documentElement.scrollTop;
	//  Chrome document.body.scrollTop   0
	console.log(scroll_top);
</script>

// Safari 
//   1：                    
//   1：  0

//   2：           500 
//   2：     500
<script>
	var scroll_top = document.body.scrollTop;
	//  Safari document.documentElement.scrollTop   0
	console.log(scroll_top);
</script>

ここでChromeとSafariは、スクロールバーに対する要素の高さの違いが大きいです.document.documentElement.scrollTopですか?それともdocument.body.scrollTopですか?
2.元素のscrollTop値を取得する

// Chrome Safari     
//   ：    
//   ：  y   100，  100
 <script>
    window.onload = function () {
     
      let obox = document.getElementById("box");
      obox.scrollTo(0, 100);
      console.log(obox.scrollTop);// result: 100
    }  
  </script>

締め括りをつける
scrollTop互換の書き方を取得します.

function getScrollTop() {
     
    var scroll_top = 0;
    if (document.documentElement && document.documentElement.scrollTop) {
      //   chrome
        scroll_top = document.documentElement.scrollTop;
    } else if (document.body) {
     
        scroll_top = document.body.scrollTop;
    }
    return scroll_top;
}

このように書いては、UAによってブラウザが区別されない限り、更新後に取得するのには適用されません.

ブラウザのwindowオブジェクトには何がありますか?