最新的Web开发教程

×

JavaScript 参考

JavaScript

JS 字符串 JS 数 JS 运算符 JS 声明 JS 数学 JS 日期 JS 排列 JS 布尔 JS 正则表达式 JS 全局 JS 转变

浏览器 BOM

Window Navigator Screen History Location

HTML DOM

DOM 文件 DOM 元素 DOM 属性 DOM 事件 DOM 样式

HTML 对象

<a> <abbr> <address> <area> <article> <aside> <audio> <b> <base> <bdo> <blockquote> <body> <br> <button> <canvas> <caption> <cite> <code> <col> <colgroup> <datalist> <dd> <del> <details> <dfn> <dialog> <div> <dl> <dt> <em> <embed> <fieldset> <figcaption> <figure> <footer> <form> <head> <header> <h1> - <h6> <hr> <html> <i> <iframe> <img> <ins> <input> button <input> checkbox <input> color <input> date <input> datetime <input> datetime-local <input> email <input> file <input> hidden <input> image <input> month <input> number <input> password <input> radio <input> range <input> reset <input> search <input> submit <input> text <input> time <input> url <input> week <kbd> <keygen> <label> <legend> <li> <link> <map> <mark> <menu> <menuitem> <meta> <meter> <nav> <object> <ol> <optgroup> <option> <output> <p> <param> <pre> <progress> <q> <s> <samp> <script> <section> <select> <small> <source> <span> <strong> <style> <sub> <summary> <sup> <table> <td> <th> <tr> <textarea> <time> <title> <track> <u> <ul> <var> <video>

其他对象

CSSStyleDeclaration

onscroll事件

例

执行一个JavaScript当<div>元件正被滚动：

<div onscroll="myFunction()">

定义和用法

当一个元素的滚动条被滚动出现的onscroll事件。

提示：使用CSS 溢出样式属性创建一个元素的滚动条。

浏览器支持

事件
onscroll	是	是	是	是	是

句法

在HTML：

在JavaScript：

object .onscroll=function(){ 试一试»

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

object .addEventListener("scroll", myScript );

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

技术细节

泡沫：	没有
取消：	没有
事件类型：	的UIEvent
支持的HTML标签：	<地址>，<BLOCKQUOTE>，<body>，<字幕>，<中心>，<DD>，<DIR>，<DIV>，<DL>，<DT>，<字段集>，<FORM>， <h1>到<H6>，<HTML>，<LI>，<菜单>，<对象>，<OL>，<p>，<PRE>，<选择>，<TBODY>，<textarea的>，<TFOOT>， <THEAD>， <ul>
DOM版本：	2级事件

更多示例

例

当用户向下滚动从页面顶部的50个像素，类名-在不同的滚动位置的类名之间切换"test"将被添加到一个元素(and removed when scrolled up again) 。

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个像素(add the slideUp class) ：

window.onscroll = function() {myFunction()};

function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}