div内元素是否在可见区域的判断与控制

最新推荐文章于 2024-08-20 10:00:03 发布

三角室

最新推荐文章于 2024-08-20 10:00:03 发布

阅读量4.2k

点赞数

分类专栏： Web开发文章标签：可见区域 scrollTop scrollHeight offsetTop html

本文链接：https://blog.csdn.net/triplestudio/article/details/51024484

版权

Web开发专栏收录该内容

22 篇文章 0 订阅

订阅专栏

应用场景：当DIV内的元素较多时，垂直滚动条很长，我们希望在div外的某项操作能让div内相关的元素自动定位，而不必去手动拖动滚动条，反复寻寻觅觅。

这里，我们只考虑垂直滚动条的情况，使用到div的几个属性即可，分别是：

scrollTop
scrollHeight
clientHeight

而要定位的元素，只需要使用到 offsetTop 属性即可。

基本原理：可见区域总是为 scrollTop 至 scrollTop + clientHeight的区域，只要元素的 offsetTop 在这个范围，即为可见。简单吧，意思就是说，滚动条当然代表的位置为可见的起点，可见的范围当然就是本身所具备的高度。由此，置元素可见，则只需要设置 scrollTop 到元素的 offsetTop 位置即可，严格的来说，是到元素 offsetTop 与 offsetTop - clientHeight 之间即可。

直接看实例，您可以复制代码存为html文件在浏览器中查看。

<html>
<head>
<style type="text/css">
button {margin:5px;}
#see { background-color: green; color:yellow;}
</style>
</head>
<body style="font-size:12px; line-height:25px;">
<div id="divScroll" style="width:300px;height:200px;overflow-y:scroll;border:1px solid gray;">
	<button id="b01">点击我哦</button><br />
	<button id="b02">点击我哦</button><br />
	<button id="b03">点击我哦</button><br />
	<button id="b04">点击我哦</button><br />
	<button id="b05">点击我哦</button><br />
	<button id="b06">点击我哦</button><br />
	<button id="b07">点击我哦</button><br />
	<button id="b08">点击我哦</button><br />	
	<button id="see">看见我不</button><br />
	<button id="b09">点击我哦</button><br />
</div>

<div style="width:300px; text-align:center; padding-top:5px;">
<!-- 如果元素不可见，让其可见 onclick -->
<a href="javascript:void(0)" οnclick="if(!isEleInView('see')) letEleInView('see');">
   如果“看见我不”不在可见区域，则让其可见
</a>
</div>

<script type="text/javascript">
/** 元素是否处于父容器的可见区域 */
function isEleInView(objId){
    // 取得其父容器，此例为指定id的div
    var div = document.getElementById("divScroll");
    var ele = document.getElementById(objId);
	var offsetTopIn = ele.offsetTop - div.offsetTop;
 
	var _scrollTop = div.scrollTop;
	var _scrollHeight = div.scrollHeight;
	var _height = div.clientHeight;
	// 可见范围即父容器滚动条当前位置 至 父容器高度这个范围 
	if(offsetTopIn >= _scrollTop && offsetTopIn <= _scrollTop + _height){ 
	    return true;
	}else{
	    return false;
	}
}

/** 元素置于父容器的可见区域 */
function letEleInView(objId){
    var div = document.getElementById("divScroll");
    var ele = document.getElementById(objId);
	var offsetTopIn = ele.offsetTop - div.offsetTop;
	// 当元素在最后等于同父容器高度的一块内，则置滚动条为最底端即可
	// 否则将滚动条的当前位置置于元素位置。 
	//（当然以下只保留 div.scrollTop = offsetTopIn; 也是可以的，因为滚动条位置超过最大位置时会自动取最大值）
	if(offsetTopIn >= div.scrollHeight - div.clientHeight){
	    div.scrollTop = div.scrollHeight - div.clientHeight;
	}else{
	    div.scrollTop = offsetTopIn;
	}
}
</script>

</body>
</html>

效果如下图：