onscroll 事件
描述
当元素的滚动条被滚动时，onscroll 事件就会发生。
提示： 使用 CSS overflow 样式属性为元素创建一个滚动条。
浏览器支持
| 事件 | |||||
|---|---|---|---|---|---|
| onscroll | 是 | 是 | 是 | 是 | 是 |
语法
技术细节
| 冒泡 | 否 |
|---|---|
| 可取消 | 否 |
| 事件类型 | 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";
}
}
自己试试 »
