最新的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";
}