JavaScript判断元素是否在浏览器可视区域
分类:实例代码
分享一段代码实例,它实现了判断一个元素是否在浏览器可见区域的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style type="text/css"> div { width:200px; height:100px; background:green; margin:10px; line-height:100px; text-align:center; } #one { position:absolute; left:-500px; } </style> <script> function isElementInViewport(el) { var rect = el.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } window.onload = function () { var str = ""; var oneDiv = document.getElementById("one"); var twoDiv = document.getElementById("two"); var show = document.getElementById("show"); if (isElementInViewport(oneDiv)) str = "第一个div在可见区域,"; if (isElementInViewport(twoDiv)) str = str + "第二个div在可见区域"; show.innerHTML = str; } </script> </head> <body> <div id="one">前端教程网一</div> <div id="two">前端教程网二</div> <div id="show"></div> </body> </html>
上面的代码实现了我们的要求,更多内容可以参阅相关阅读。
相关阅读:
(1).getBoundingClientRect()可以参阅js getBoundingClientRect()一章节。
(2).innerHeight可以参阅window.innerHeight一章节。
(3).clientWidth可以参阅clientWidth一章节。
(4).clientHeight可以参阅clientHeight一章节。
(5).innerHTML可以参阅innerHTML一章节。
JavaScript判断元素是否在浏览器可视区域,这样的场景在实际项目中还是用的比较多的,关于JavaScript判断元素是否在浏览器可视区域就介绍到这了。
JavaScript判断元素是否在浏览器可视区域属于前端实例代码,有关更多实例代码大家可以查看。