js获取滚动条距离顶部高度

在我们日常的web开发中，有时候我们需要知道用户滚动页面的高度，比如：当用户滚动到某个位置，我们需要执行某个事件或者显示某个元素。这时候，我们就需要获取滚动条距离顶部的高度。

获取window对象滚动状态

我们可以通过window的scrollY或者pageYOffset属性获取浏览器窗口垂直方向滚动的距离。代码如下：

var scrollTop = window.scrollY || window.pageYOffset;
console.log(scrollTop);

其中，如果浏览器不支持scrollY，那么我们可以使用pageYOffset属性。

获取滚动容器滚动状态

在某些情况下，我们要获取滚动容器的滚动状态，这时候就需要用到滚动容器的scrollTop属性。代码如下：

var container = document.getElementById('scroll-container');
var scrollTop = container.scrollTop;
console.log(scrollTop);

其中，我们需要获取一个id为scroll-container的元素，然后通过scrollTop属性获取它的滚动状态。

事件监听

如果我们需要在用户滚动时监听滚动事件，那么可以通过window对象或滚动容器的addEventListener方法来添加滚动事件。代码如下：

window.addEventListener('scroll', function() {
  var scrollTop = window.scrollY || window.pageYOffset;
  console.log(scrollTop);
});

var container = document.getElementById('scroll-container');
container.addEventListener('scroll', function() {
  var scrollTop = container.scrollTop;
  console.log(scrollTop);
});

这样，每次用户滚动页面或滚动容器时，就会触发相应的监听事件，然后我们就可以获取滚动状态了。

总结

通过以上方法，我们就可以获取滚动条距离顶部的高度，并在必要时监听滚动事件。希望以上内容对大家有所帮助。