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";
}
}
亲自试一试 »
