onscroll 事件

DOM 事件 Event အဖွဲ့

定义和用法

onscroll 事件在元素的滚动条被滚动时发生。

提示：请使用 CSS overflow 样式属性为元素创建滚动条。

实例

例子 1

在滚动 <div> 元素时执行 JavaScript：

<div onscroll="myFunction()">

ကိုယ်တိုင် ကျင်းပပါ

例子 2

在不同滚动位置的类名之间切换 - 当用户从页面顶部向下滚动 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 = "";
  }
}

ကိုယ်တိုင် ကျင်းပပါ

例子 3

当用户从页面顶部向下滚动 350 像素时滑入元素（添加 slideUp 类）：

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

ကိုယ်တိုင် ကျင်းပပါ

အက္ခရာ

HTML တွင်:

<element onscroll="myScript">

ကိုယ်တိုင် ကျင်းပပါ

JavaScript တွင်:

object.onscroll = function(){myScript};

ကိုယ်တိုင် ကျင်းပပါ

JavaScript တွင်，addEventListener() မီးရပ်ဆိုင်ကို အသုံးပြုပါ:

object.addEventListener("scroll", myScript);

ကိုယ်တိုင် ကျင်းပပါ

ဖော်ပြချက်:Internet Explorer 8 သို့မဟုတ် အနှစ်တစ်ကြိမ်တစ်ခါ မထောက်ပံ့ထား addEventListener() မီးရပ်ဆိုင်。

နည်းပါးများ

ပေါ်လွင်းလာသည်: မထောက်ပံ့ထား
ဖျက်သိမ်းနိုင်သည်: မထောက်ပံ့ထား
အမျိုးအစားအမှာ: အသုံးပြုသူပြင်ဘာမှ ထုတ်လုပ်လျှင်: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

浏览器支持

事件 Chrome IE Firefox Safari Opera
onscroll 支持 支持 支持 支持 支持
DOM 事件 Event အဖွဲ့