JavaScript 滚动

JavaScript 中的 onscroll 事件发生在使用元素的滚动条时。当用户上下移动滚动条时，会触发该事件。我们可以使用 CSS 的 overflow 属性来创建滚动条。

在 HTML 中，我们可以使用 onscroll 属性并为其分配一个 JavaScript 函数。我们也可以使用 JavaScript 的 addEventListener() 方法 并传递一个 scroll 事件给它，以获得更大的灵活性。

语法

现在，我们来看一下在 HTML 和 JavaScript 中使用 onscroll 事件的语法（不使用 addEventListener() 方法或使用 addEventListener() 方法）。

在 HTML 中

在 JavaScript 中

在 JavaScript 中使用 addEventListener() 方法

现在，让我们看一些示例来理解滚动事件。

示例 - 在 HTML 中使用 onscroll 属性

在此示例中，我们使用了 HTML 的 onscroll 属性。有一个 ID 为 "para" 的段落元素，我们在其上应用了 onscroll 属性。当用户滚动段落时，段落的文本颜色和背景颜色将发生变化。

输出

滚动屏幕上的带边框文本后，我们将得到以下输出 -

现在，我们将看到如何使用 JavaScript 的 onscroll 事件。

示例 - 使用 JavaScript

输出

滚动屏幕上的带边框文本后，我们将得到以下输出 -

示例 - 使用 addEventListener()

输出

滚动屏幕上的带边框文本后，我们将得到以下输出 -