JavaScript教程-JavaScript scroll
JavaScript中的onscroll事件在用户使用滚动条时触发，当用户上下滚动滚动条时会触发此事件。我们可以使用CSS的overflow属性创建滚动条。
在HTML中，我们可以使用onscroll属性并将JavaScript函数分配给它。我们还可以使用JavaScript的addEventListener()方法并传递scroll事件以实现更大的灵活性。
语法
现在，让我们看看如何在HTML和JavaScript中使用onscroll事件的语法（不使用addEventListener()方法或使用addEventListener()方法）。
在HTML中
<element onscroll="fun()">在JavaScript中
object.onscroll = function() { myScript };通过使用addEventListener()方法的JavaScript
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 javaTiku.cn. This site is developed so that students may learn computer science related technologies easily. The javaTiku.cn 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来使用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 javaTiku.cn. This site is developed so that students may learn computer science related technologies easily. The javaTiku.cn 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>示例 - 使用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 javaTiku.cn. This site is developed so that students may learn computer science related technologies easily. The javaTiku.cn 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>
