JavaScript判断元素底部到达浏览器客户区的低端

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

分享一段代码实例,它能够实现判断元素的底部是否到达浏览器客户区的底部。

这也是看到有朋友在提问,收集了相关的答案进行分享一下。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
}
#antzone {
  width:50px;
  height:2000px;
  background:green;
  margin:50px auto;
}
</style> 
<script type="text/javascript"> 
window.onload = function () {
  var odiv = document.getElementById("antzone");
  var H = odiv.offsetHeight + odiv.offsetTop;
  var scrollH = H-document.documentElement.clientHeight;
  window.onscroll = function () {
    if (document.documentElement.scrollTop + document.body.scrollTop >= scrollH) {
      alert("元素的的边缘已经到达客户区底边缘");
    }
  }
}
</script> 
</head>   
<body> 
<div id="antzone"></div>
<div id="show"></div>
</body> 
</html>

上面的代码实现了我们的要求,下面详细介绍一下它的实现过程。

一.代码注释:

(1).window.onload = function () {},当文档内容完全加载完毕再去执行函数中的代码。

(2).var odiv = document.getElementById("antzone"),获取id属性值为antzone的元素对象。

(3).var H = odiv.offsetHeight + odiv.offsetTop,获取元素的高度和元素距离根元素的距离和。

(4).var scrollH = H-document.documentElement.clientHeight,获取默认元素底部被遮挡的尺寸,如果页面上滚这个尺寸,那么元素的低边缘就位于浏览器客户区的低端。

(5).window.onscroll = function () {},注册onscroll事件处理函数。

(6).document.documentElement.scrollTop + document.body.scrollTop >= scrollH,判断向上滚动的尺寸是否大于等于scrollH。

二.相关阅读:

(1).offsetHeight参阅js offsetHeight一章节。

(2).offsetTop参阅js offsetTop一章节。

(3).clientHeight参阅clientHeight一章节。

(4).onscroll参阅javascript scroll事件一章节。

JavaScript判断元素底部到达浏览器客户区的低端,这样的场景在实际项目中还是用的比较多的,关于JavaScript判断元素底部到达浏览器客户区的低端就介绍到这了。

JavaScript判断元素底部到达浏览器客户区的低端属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容