onscroll 事件

实例

在滚动 <div> 元素时执行 JavaScript：

<div onscroll="myFunction()">

亲自试一试

定义和用法

onscroll 事件在元素的滚动条被滚动时发生。

提示：请使用 CSS overflow 样式属性为元素创建滚动条。

浏览器支持

语法

在 HTML 中：

<element onscroll="myScript">

亲自试一试

在 JavaScript 中：

object.onscroll = function(){myScript};

亲自试一试

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("scroll", myScript);

亲自试一试

注释：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技术细节

更多实例

实例

在不同滚动位置的类名之间切换 - 当用户从页面顶部向下滚动 50 像素时，类名 "test" 将被添加到元素中（再次向上滚动时将被删除）。

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

亲自试一试

实例

当用户从页面顶部向下滚动 350 像素时滑入元素（添加 slideUp 类）：

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

亲自试一试