js定位div滚动条位置

js定位div滚动条位置
如图：

1.找到需要定位元素的位置，已Y轴为例，使用offsetTop找到距离父元素顶部的距离。
2.使用scrollTop属性使其父元素滚动到相应的位置，看下列代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function dw(){let [parentDoc,childDoc]= [document.querySelector('#fjd'),document.querySelector('.zjd')];parentDoc.scrollTop = childDoc.offsetTop - parentDoc.offsetHeight /2 ; //如果大于div高度使其居中childDoc.style.background = 'red'}
</script>
</head>
<body>
<button onclick="dw()">定位<button>
<div id="fjd" style="height:100px;overflow:auto;width: 200px;"><div >找到了</div><div >找到了</div><div  >找到了</div><div >找到了</div><div >找到了</div><div class="zjd" >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div>找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div><div >找到了</div></div></body>
</html>

对你有帮助的话点关注，不定时更新js有趣小知识。

js定位div滚动条位置相关推荐

js设置控制滚动条位置
js设置控制滚动条位置注意:scrollLeft,scrollTop是加在容器上,不是加载滚动的内容上. 使用: scrollLeftOffset: function () {$('.time- ...
JS获取div滚动条距离实现弹出标签位置动态移动
前些天尝试了一个定位弹出div标签的功能,没有滚动条时用的是绝对位置,有滚动条后就必须在绝对位置XY坐标上减去滚动条吃进的距离,否则定位就不准了. 下面是获取div滚动条距离的JS脚本: <SC ...
js判断div滚动条是否滚动到底部
1.设置div固定高度,并且设置为内部超出可滚动 2.获取div标签,并获取div滚动距离顶部的高度 3.获取div的高度,如果没有给div设置高度可获取视图窗口的高度 4.获取div标签滚动高度 4 ...
vue 页面滚动条和div滚动条联动（控制div滚动条位置）
使用场景:页面中存在侧边导航栏,导航栏部分内容无法完全显示,当滚动页面时,div中滚动条一起滚动到导航选中位置主要代码:nav-menu为div的id // 选中当前导航时div自动滚动到设定位置i ...
js定位div坐标存入mysql_JavaScript与Div 对层定位和移动获得坐标
1:移动图层获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) var x,y,z,down=false,obj function init(){ obj=event ...
js控制div滚动条的显示/隐藏
滚动条显示 document.getElementById("keyCard").style.overflow = "auto"; 滚动条隐藏 document ...
js滚动div滚动条到底部
self.toastContainerElement.scrollTop = self.toastContainerElement.scrollHeight;
Div滚动条定位设置
1.div <div id="DataDiv" style="overflow-x: hidden;overflow-y: scroll;max-height:50 ...
刷新后页面保持滚动条位置
如何使页面刷新后仍然保持滚动条位置,有几种方法: 1. MaintainScrollPositionOnPostBack 最好在Page_Load 中加入 Page.MaintainScrollPo ...

js定位div滚动条位置

js定位div滚动条位置相关推荐

最新文章

热门文章