JS基础——两种简单方法判断某一元素是否在视窗范围内_js判断是否在视窗内来定位tooltip的位置-CSDN博客

本文链接：https://blog.csdn.net/ZKH129/article/details/125445080

一、相关知识

获取滚轮下拉的距离：document.documentElement.scrollTop

获取目前视窗的高度：document.documentElement.clientHeight

获取dom元素的高度：dom.offsetHeight

获取dom元素上边缘距离页面最上方的距离：dom.offsetTop

获取dom元素上边缘距离可视区域上边缘的距离：dom.getBoundingClientRect().top

二、代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		.c2{
			color: red;
			background-color: blue;
			height: 500px;
		}

		.c1{
			color: red;
			background-color: red;
			height: 2500px;
		}
	</style>
</head>
<body>
	<div class="c1">123</div>
	<div class="c2">123</div>
	<div class="c1">123</div>

</body>
<script type="text/javascript">
	let dom = document.getElementsByClassName('c2')[0]
	// 方法一：scrollTop、clientHeight和offsetTop
	document.addEventListener('scroll',function() {
		// let bd = dom.getBoundingClientRect()
		let scrollTop = document.documentElement.scrollTop
		let clientHeight = document.documentElement.clientHeight
		let offsetHeight = dom.offsetHeight
		let offsetTop = dom.offsetTop
		if(scrollTop+clientHeight>=offsetTop&& offsetTop+offsetHeight>=scrollTop){
			console.log(true)
		}else{	
			console.log(false)
		}
	})

	// 方法二： dom.getBoundingClientRect()
	document.addEventListener('scroll',function() {
		let bounding = dom.getBoundingClientRect()
		if(bounding.y<=document.documentElement.clientHeight && -bounding.y<=bounding.height){
			console.log(true)
		}else{
			console.log(false)
		}
	})

</script>
</html>