js獲取頁面向上或者向左滾動的尺寸

螞蟻小編發表於2017-04-14
JS

本章節介紹一下如何獲取頁面向上或者向左滾動的尺寸。

也就是當頁面的尺寸大於瀏覽器視口的尺寸的時候，就會出現滾動條，向下拖動滾動條或者向右拖動滾動條，就會有一部頁面被視口所遮蓋，這裡就是獲取被遮蓋的尺寸。所謂"視口"只是實際顯示文件內容的瀏覽器的一部分，不包括瀏覽器的選單、工具條、標籤頁等“外殼部分”。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  margin:0px;
  padding:0px;
}
#box {
  width:1800px;
  height:1500px;
  background:#ccc;
}
#show {
  width:100px;
  height:50px;
  background:red;
  position:fixed;
  top:10px;
  left:10px;
}
</style>
<script type="text/javascript">
function getScrollOffset(w){
  w = w || window;
  if (w.pageXOffset != null) {
    return { x: w.pageXOffset, y: w.pageYOffset };
  } 
  var d = document;
    //標準模式
  if (document.compatMode == "CSS1Compat") {
    return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
  } 
  //怪異模式
  return { x: d.body.scrollLeft, y: d.body.scrollTop };
}
window.onscroll = function () {
  var p = getScrollOffset();
  show.innerHTML = p.x+"<br/>"+p.y
}
</script>
</head>
<body>
<div id="show"></div>
<div id="box"></div>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼非常簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.window.pageXOffset可以參閱window.pageXOffset一章節。

（2）.window.pageYOffset可以參閱window.pageYOffset一章節。

（3）.scrollLeft可以參閱js scrollLeft一章節。

（4）.onscroll可以參閱javascript scroll事件一章節。

相關文章