当滚动条用于元素时,JavaScript中的 onscroll 事件发生。当用户向上或向下移动滚动条时,将触发该事件。我们使用CSS overflow属性创建滚动条。

HTML 中,我们可以使用 onscroll 属性并为其分配JavaScript函数。

语法

现在,我们看到了在HTML和 JavaScript 中使用 onscroll 事件的语法(没有 addEventListener()方法或使用 addEventListener()方法)。

在HTML中

<element onscroll = "fun()">

使用JavaScript

object.onscroll = function() { myScript };

在JavaScript中,使用addEventListener()方法

object.addEventListener("scroll", myScript);

让我们看一些插图以了解滚动事件。

示例-在HTML中使用onscroll属性

在此示例中,我们使用HTML onscroll 属性。有一个带有 id =" para" 的段落元素,我们将在该元素上应用 onscroll 属性。当用户滚动段落时,该段落的颜色和背景颜色将改变。

<!DOCTYPE html>
<html>
<head>
<style>
#para{
width: 250px;
height: 150px;
overflow: scroll;
border: 1px solid red;
font-size: 25px;
}
</style>
</head>

<body>
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p> This is an example of using the <b> onscroll </b> attribute. </p>
<p id = "para" onscroll = "fun()"> Hi, Welcome to the learnfk.com. This site is developed so that students may learn computer science related technologies easily. The learnfk.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<script>
function fun() {
document.getElementById("para").style.color = "red";
document.getElementById("para").style.background = "lightgreen";
}
</script>
</body>
</html>

输出

JavaScript scroll

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

JavaScript scroll

现在,我们将了解如何通过JavaScript使用 onscroll 事件。

示例-使用JavaScript

<!DOCTYPE html>
<html>
<head>
<style>
#para{
width: 250px;
height: 150px;
overflow: scroll;
border: 1px solid red;
font-size: 25px;
}
</style>
</head>

<body>
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p> This is an example of using JavaScript's <b> onscroll </b> event. </p>
<p id = "para"> Hi, Welcome to the learnfk.com. This site is developed so that students may learn computer science related technologies easily. The learnfk.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<p id = "para1"></p>

<script>
document.getElementById("para").onscroll = function() {fun()};
function fun() {
document.getElementById("para").style.color = "red";
document.getElementById("para").style.background = "lightgreen";
document.getElementById("para1").innerHTML = "You are scrolling the content";

}
</script>
</body>
</html>

输出

JavaScript scroll

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

JavaScript scroll

示例-使用addEventListener()

<!DOCTYPE html>
<html>
<head>
<style>
#para{
width: 250px;
height: 150px;
overflow: scroll;
border: 1px solid red;
font-size: 25px;
}
</style>
</head>

<body>
<h1> Hello world :):) </h1>
<h2> Scroll the bordered text to see the effect. </h2>
<p id = "para"> Hi, Welcome to the learnfk.com. This site is developed so that students may learn computer science related technologies easily. The learnfk.com is always providing an easy and in-depth tutorial on various technologies. No one is perfect in this world, and nothing is eternally best. But we can try to be better. </p>
<p id = "para1"></p>

<script>
document.getElementById("para").addEventListener("scroll", fun);
function fun() {
document.getElementById("para").style.color = "red";
document.getElementById("para").style.background = "lightgreen";
document.getElementById("para1").innerHTML = "You are scrolling the content";

}
</script>
</body>
</html>

输出

JavaScript scroll

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

JavaScript scroll

这一章你学到了什么?来做个笔记,好记忆不如烂笔头! 如果觉得对您有帮助,麻烦帮分享给您的朋友😊😊

祝学习愉快!(如果觉得不正确,选中要修改的内容->右键->编辑)

点我分享笔记