js获取页面向上或者向左滚动的尺寸

快乐打工仔 分类:实例代码

本章节介绍一下如何获取页面向上或者向左滚动的尺寸。

也就是当页面的尺寸大于浏览器视口的尺寸的时候,就会出现滚动条,向下拖动滚动条或者向右拖动滚动条,就会有一部页面被视口所遮盖,这里就是获取被遮盖的尺寸。所谓"视口"只是实际显示文档内容的浏览器的一部分,不包括浏览器的菜单、工具条、标签页等“外壳部分”。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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事件一章节。

js获取页面向上或者向左滚动的尺寸,这样的场景在实际项目中还是用的比较多的,关于js获取页面向上或者向左滚动的尺寸就介绍到这了。

js获取页面向上或者向左滚动的尺寸属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容