【js】计算child node 到 parent node的距离并且滚动到位置

KatyLight

已于 2022-08-03 10:40:01 修改

阅读量224

点赞数 1

分类专栏： JS 文章标签： javascript html 前端

于 2022-08-02 10:14:50 首次发布

本文链接：https://blog.csdn.net/qq_33014695/article/details/126116697

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

可以直接在任何js环境运用的函数，需要两个node，一个父节点一个子节点，通过叠加计算offsetTop计算出最终要滚动的距离。

 function getTwoPositionTop(parent, child) {
      if (!child||!parent) {
        throw  new Error('empty node!')
      }
      if (!parent.contains(child)) {
        throw  new Error('is not parent node!')
      }
      if (parent.style.position !== 'relative') {
        throw  new Error('parent node position must be relative!')
      }
      let k = 0;
      let o = child;
      let s = child;
      while (true) {
        let z = o.parentElement;
        if ((z.style.position !== 'static' && z.style.position !== '')||z.style.transform) {

          k += s.offsetTop;
          s = z;
        }
        o = z;
        if (z === parent) {
          return k;
        }
      }
    }

计算child node 到 parent node的距离并且滚动到位置，一般用于滚动到指定位置，目前只支持判断relative。transform和postiron会收到影响，所以每一次遍历就是找父节点和最底下的子节点。

完整的演示代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    function getTwoPositionTop(parent, child) {
      if (!child||!parent) {
        throw  new Error('empty node!')
      }
      if (!parent.contains(child)) {
        throw  new Error('is not parent node!')
      }
      if (parent.style.position !== 'relative') {
        throw  new Error('parent node position must be relative!')
      }
      let k = 0;
      let o = child;
      let s = child;
      while (true) {
        let z = o.parentElement;
        if (z.style.position !== 'static' && z.style.position !== '') {
          k += s.offsetTop;
          s = z;
        }
        o = z;
        if (z === parent) {
          return k;
        }
      }
    }

    window.onload = () => {
      let t=getTwoPositionTop(document.getElementById('div'),document.getElementById('child'))
      document.getElementById('div').scrollTo(0,t)
    }
  </script>
</head>
<body>
<div style="height: 600px;border: 1px solid red;position: relative;overflow-y: scroll;" id="div">
  <div style="margin-top: 700px" id="child">123</div>
</div>
</body>
</html>