判断div是否在浏览器的可视区

本文给出了“判断 div 是否在可视区”的 html 和 JavaScript 混合代码。

以下为判断 div 是否在可视区的 html 和 JavaScript 混合代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Demo</title>
</head>

<body style="width:2000px; height:1000px; padding:0; margin:0;">
<div id="demo" style=" width:200px; height:2000px; margin-top:500px; background:#CC0000;">Demo</div>
<div id="debug" style="position:fixed; padding:10px; top:0;right:0; height:500px; overflow:scroll; "></div>
<div style="height: 1000px;"></div>
</body>
</html>
<script>
window.onload = window.onscroll = function (){
	var obj = document.getElementById('demo');
	var pos = obj.getBoundingClientRect();
	if (document.documentElement.getBoundingClientRect) { 
		var w = document.documentElement.clientWidth;
		var h = document.documentElement.clientHeight;
		document.getElementById('debug').innerText +=  (pos.top>h || pos.bottom<0 || pos.left>w || pos.right<0? "\r不可视　":"\r>>[可视]　") ;
	} 
}

</script>

【注意】本文属于作者原创，欢迎转载！转载时请注明以下内容:

（转载自）ShengChangJian's Blog编程技术文章地址:

https://ShengChangJian.github.io/2016/08/div-visual-or-not.html

主页地址：https://shengchangjian.github.io/

判断div是否在浏览器的可视区

Comments

【目录】