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设置滚动条距离顶部的距离。在实际开发中，我们可以根据需求使用不同的方法来实现相应的功能。

原创文章，作者：AQDJS，如若转载，请注明出处：https://www.506064.com/n/313484.html