目录

onscroll 事件

❮上一节活动参考下一节❯

示例

当 <div> 元素滚动时调用函数：

<div onscroll="myFunction()">

亲自试一试 »

描述

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

提示：使用CSS溢出style 属性为元素创建滚动条。

浏览器支持

Event
onscroll	Yes	Yes	Yes	Yes	Yes

语法

在 HTML 中：

< element onscroll=" myScript">

亲自试一试 »

在 JavaScript 中：

object.onscroll = function(){ myScript};

亲自试一试 »

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

object.addEventListener("scroll", myScript);

亲自试一试 »

技术细节

气泡：	不
可取消：	不
事件类型：	用户界面事件如果从用户界面生成，事件否则
HTML 标签：	<地址>、<块引用>、<正文>、<标题>、<中心>、<dd>、<目录>、<div>、<dl>、<dt>、<字段集>、<表单>、<h1 > 至 <h6>、<html>、<li>、<menu>、<object>、<ol>、<p>、<pre>、<select>、<tbody>、<textarea>、<tfoot>、 <标题>，<ul>
DOM 版本：	2 级活动

更多示例

示例

在不同滚动位置上的类名称之间切换 - 当用户从页面顶部向下滚动 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";
}
}

亲自试一试 »

❮上一节活动参考下一节❯