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判断元素底部到达浏览器客户区的低端属于前端实例代码,有关更多实例代码大家可以查看。