onscroll 事件
定义和用法
onscroll 事件在元素的滚动条被滚动时发生。
提示:请使用 CSS overflow 样式属性为元素创建滚动条。
浏览器支持
| 事件 | |||||
|---|---|---|---|---|---|
| onscroll | Yes | Yes | Yes | Yes | Yes |
语法
注释: Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。
技术细节
| 是否支持冒泡: | No |
|---|---|
| 是否支持取消: | No |
| 事件类型: | 如果从用户界面生成,UiEvent。否则 Event。 |
| 支持的 HTML 标签: | <address>,<blockquote>,<body>,<caption>,<center>,<dd>,<dir>,<div>,<dl>,<dt>,<fieldset>,<form>,<h1> to<h6>,<html>,<li>,<menu>,<object>,<ol>,<p>,<pre>,<select>,<tbody>,<textarea>,<tfoot>,<thead>,<ul> |
| DOM 版本: | Level 2 Events |
更多实例
实例
在不同滚动位置的类名之间切换 - 当用户从页面顶部向下滚动 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";
}
}亲自试一试 »