js定位div滚动条位置

最新推荐文章于 2024-07-20 13:48:02 发布

曲经通幽

最新推荐文章于 2024-07-20 13:48:02 发布

阅读量2.8k

点赞数

分类专栏： web 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/weixin_43883468/article/details/120363414

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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有趣小知识。