JavaScript HTML DOM onscroll 事件

onscroll 事件

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

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

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

<div onscroll="myFunction()">

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
事件
onscroll	支持	支持	支持	支持	支持

语法

在HTML中：

在JavaScript中：

object.onscroll = function(){myScript};

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

object.addEventListener("scroll", myScript);

注意:在Internet Explorer 8和更早版本不支持使用addEventListener()方法。

技术细节

项目	描述
冒泡：	没有
取消：	没有
事件类型：	如果从用户界面生成则为UiEvent，否则为Event
支持的HTML标记：	<address>，<blockquote>，</html-body-tag/443.html>，<caption>，<center>，<dd>，<dir>，<div>，<dl>，<dt>，<fieldset>，<form>，<h1 >到<h6>，<html>，<li>，<menu>，<object>，<ol>，<p>，<pre>，<select>，<tbody>，<textarea>，<tfoot>， <thead>，<ul>
DOM版本	DOM Event Level 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";
  }
}

尝试一下

JavaScript HTML DOM onscroll 事件

onscroll 事件

浏览器支持

语法

技术细节

更多例子

相关页面