JS获取滚动条距离顶部的距离

发布时间：2023-05-18

JS获取滚动条距离顶部的距离

JS获取滚动条距离顶部的距离其实就是获取浏览器滚动条已经滚动的高度。在实际的开发中，有时会需要根据滚动条距离顶部的距离，来控制一些元素的显示和隐藏、加载更多数据等等操作。

一、滚动条距离顶部的距离

要获取滚动条距离顶部的距离，我们可以使用 document.documentElement.scrollTop（兼容性写法：document.body.scrollTop），代码如下：

<script>
  //获取滚动条距离顶部的距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log(scrollTop);
</script>

上面的代码中，为了兼容不同的浏览器，我们使用了 document.documentElement.scrollTop || document.body.scrollTop 的方式来获取滚动条距离顶部的距离。

二、获取滚动条滚动距离

在实际的使用中，我们可能需要在用户滚动页面时，实时获取滚动条滚动的距离。可以通过绑定 scroll 事件来实现，代码如下：

<script>
  window.addEventListener('scroll', function() {
    // 获取滚动条滚动距离
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(scrollTop);
  });
</script>

上面的代码中，我们通过 addEventListener 方法绑定了滚动事件，当页面滚动时就会触发事件处理函数，并且通过 scrollTop 获取当前的滚动距离。

三、JS获取元素距离顶部的位置

有时候我们需要获取某个元素距离顶部的距离，可以通过 offsetTop 获取。但是需要注意的是，offsetTop 获取的是元素相对于父元素的位置，如果元素的父元素有相对或绝对定位，那么 offsetTop 获取的结果就会受到影响。因此，为了获取准确的距离，可以采用递归的方式，获取元素距离顶部的真正距离。代码如下：

<script>
  // 获取元素距离顶部位置
  function getElementTop(elem) {
    var top = elem.offsetTop;
    var parentElem = elem.offsetParent;
    while (parentElem) {
      top += parentElem.offsetTop;
      parentElem = parentElem.offsetParent;
    }
    return top;
  }
  // 使用方法
  var elem = document.getElementById('elem');
  var top = getElementTop(elem);
  console.log(top);
</script>

上面的代码中，首先通过 getElementById 获取目标元素 elem，然后通过 getElementTop 函数获取 elem 距离顶部的真正距离。

四、JS获取 div 到顶部的距离

如果我们想获取一个 div 元素距离页面顶部的距离，可以将上面的代码稍作修改，代码如下：

<script>
  // 获取元素距离顶部位置
  function getElementTop(elem) {
    var top = elem.offsetTop;
    var parentElem = elem.offsetParent;
    while (parentElem) {
      top += parentElem.offsetTop;
      parentElem = parentElem.offsetParent;
    }
    return top;
  }
  // 使用方法
  var elem = document.getElementById('elem');
  var top = getElementTop(elem.parentElement);
  console.log(top);
</script>

上面的代码中，我们通过 elem.parentElement 获取到 div 元素的直接父元素，然后通过 getElementTop 获取到该父元素距离顶部的距离。

五、JS获取元素到页面顶部的距离

如果我们不想通过递归的方式获取元素距离顶部的距离，可以使用 getBoundingClientRect() 方法。这个方法会返回一个对象，其中包含了元素的位置信息，包括 top、right、bottom、left 等值。从中我们可以获取元素距离页面顶部的距离。代码如下：

<script>
  // 获取元素到页面顶部的距离
  function getElementTop(elem) {
    var rect = elem.getBoundingClientRect();
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    return rect.top + scrollTop;
  }
  // 使用方法
  var elem = document.getElementById('elem');
  var top = getElementTop(elem);
  console.log(top);
</script>

上面的代码中，我们通过 getBoundingClientRect() 方法获取到元素的位置信息，然后通过 scrollTop 获取当前滚动的高度，最后将它们相加就可以得到元素距离页面顶部的距离。

六、JS设置滚动条距离顶部的距离

除了获取滚动条距离顶部的距离之外，有时候我们也需要设置滚动条的位置。可以通过 scrollTop 属性来设置滚动条距离顶部的距离。代码如下：

<script>
  // 设置滚动条距离顶部的距离
  function setScrollTop(value) {
    document.documentElement.scrollTop = value;
    document.body.scrollTop = value;
  }
  // 使用方法
  setScrollTop(500);
</script>

上面的代码中，我们通过 setScrollTop 函数可以设置滚动条的位置，传入的参数 value 就是需要设置的滚动条的距离值。

总结

以上就是 JS 获取滚动条距离顶部的距离的几种方法，包括获取滚动条距离顶部的距离、获取滚动条滚动距离、JS 获取元素距离顶部的位置、JS 获取 div 到顶部的距离、JS 获取元素到页面顶部的距离以及 JS 设置滚动条距离顶部的距离。在实际开发中，我们可以根据需求使用不同的方法来实现相应的功能。

推荐文章