迹忆客 专注技术分享

在本文中，我们将解释如何在 JavaScript 中获取滚动条位置，我们将讨论：

• 滚动条和滚动条位置
• JavaScript 中的滚动事件

JavaScript 中的滚动条和滚动条位置

通常位于屏幕右侧或底部的水平或垂直条允许你在某个方向上更改窗口查看区域。

今天，大多数人都熟悉滚动条，因为他们需要在每个网页上横向查看更多内容。

滚动条位置与窗口的查看区域垂直和水平。向用户显示他滚动了多少或可以滚动到左侧或底部。

页面加载时的滚动位置为 0px，左侧为 0px，顶部为 0px。

JavaScript 中的滚动事件

滚动事件是触发垂直或水平滚动条位置的 JavaScript 事件。可以使用 JavaScript 事件侦听器或 JavaScript 事件处理程序来侦听它。

在 JavaScript 中监听 scrollEvent

由于 scroll 是一个 JavaScript 事件，我们可以通过添加一个事件监听器来监听任何文档对象模型元素上的滚动事件。

<div id="content">
   This is a random paragraph, we will be wrting this paragraph for our basic understanding. Nothing here is going to make sense. So you could stop reading the paragraph. And look at the source code if you want.
</div>
<script>
   document.getElementById("content").addEventListener("scroll", () => console.log("Div was scrolled"));
    //logs: Div was scrolled
</script>

在上面提到的代码中，有一个 div 元素。JavaScript 部分中有一个事件侦听器，用于侦听该特定 div 元素上的滚动事件。

每当有人在该 div 内滚动时，它都会记录一个字符串，上面写着 Div was scrolled。

在 jQuery 中使用 scroll 函数作为回调

类似地，可以使用 JavaScript 框架（例如 jQuery）来处理 JavaScript 事件。

<div id="content">
   This is a random paragraph, we will be wrting this paragraph for our basic understanding. Nothing here is going to make sense. So you could stop reading the paragraph. And look at the source code if you want.
</div>
<script>
    $("#content").scroll(function(){
      console.log("Div was scrolled")
    });
    //logs: Div was scrolled
</script>

一个 jQuery 滚动事件附加到 id 为 content 的 div 元素。

jQuery 的 scroll 方法有一个回调函数，每当有人在 div 内滚动时都会触发该回调函数。

使用 window 对象监听 JavaScript 中的滚动事件

我们可以使用 JavaScript 对象来监听窗口上的滚动事件，因为我们知道 window 对象与任何其他 JavaScript 对象没有什么不同。

我们可以使用滚动事件监听器来监听滚动事件。

window.addEventListener('scroll', (event) => {
  let scrollY = this.scrollY;
  let scrollX = this.scrollX;
  console.log(scrollY);
  console.log(scrollX);
});

this 表示 window 对象。scrollY 是 window 的一个属性，它告诉我们从顶部滚动的窗口查看区域中的像素数。

scrollX 是 window 对象的一个​​属性，它告诉用户从左侧滚动了多少。