js获取滚动条位置

js yekong

在JavaScript中,获取滚动条位置可以通过window对象的scrollYscrollX属性来实现。scrollY属性返回窗口查看区域从顶部滚动的像素数,而scrollX属性返回窗口查看区域从左侧滚动的像素数。以下是获取滚动条位置的示例代码:

window.addEventListener("scroll", (event) => {
  let scrollY = window.scrollY; // 或者使用 this.scrollY
  let scrollX = window.scrollX; // 或者使用 this.scrollX
  console.log('垂直滚动位置: ' + scrollY);
  console.log('水平滚动位置: ' + scrollX);
});

在这个示例中,我们添加了一个事件监听器来监听scroll事件,每当页面滚动时,就会打印出当前的水平和垂直滚动位置.

如果你需要获取某个元素内部的滚动条位置,可以通过该元素的scrollTopscrollLeft属性来获取。例如:

<div id="ContentContainer" style="overflow:auto;">
  <div id="content" style="height:500px; width:1000px;"></div>
</div>
function getScrollPosition() {
  var container = document.getElementById('ContentContainer');
  console.log('元素内垂直滚动位置: ' + container.scrollTop);
  console.log('元素内水平滚动位置: ' + container.scrollLeft);
}

// 假设ContentContainer是一个具有滚动条的元素
var container = document.getElementById('ContentContainer');
container.onscroll = getScrollPosition;

在这个示例中,当ContentContainer元素内部发生滚动时,getScrollPosition函数会被调用,并打印出该元素内部的滚动条位置.

喜欢