onscroll ဖြစ်ရပ်
ဥပမာ
<div> ဒြပ်စင်တစ်ခုကို ရွှေ့သည့်အခါ JavaScript ကို လုပ်ဆောင်ပါ-
<div onscroll="myFunction()">
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
ဒြပ်စင်တစ်ခု၏ scrollbar ကို scroll လုပ်သည့်အခါတွင် onscroll ဖြစ်ရပ် ဖြစ်ပေါ်သည်။
အကြံပြုချက်- ဒြပ်စင်တစ်ခုအတွက် scrollbar တစ်ခုဖန်တီးရန် CSS overflow style property ကို အသုံးပြုပါ။
Browser ပံ့ပိုးမှု
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
အထားအသို
HTML တွင်-
<element onscroll="myScript">
JavaScript တွင်-
object.onscroll = function(){myScript};
JavaScript တွင် addEventListener() method ကိုအသုံးပြု၍-
object.addEventListener("scroll", myScript);
မှတ်ချက်- addEventListener () နည်းလမ်းကို Internet Explorer 8 နှင့် အစောပိုင်းဗားရှင်းများတွင် ပံ့ပိုးမထားပါ။
နည်းပညာဆိုင်ရာအသေးစိတ်
ပူဖောင်း: | မရှိ |
---|---|
ပယ်ဖျက်နိုင်သည်- | မရှိ |
ပွဲအမျိုးအစား- | UiEvent ကို အသုံးပြုသူ အင်တာဖေ့စ်မှ ထုတ်လုပ်ပါက၊ Event မဟုတ်လျှင် |
ပံ့ပိုးထားသော HTML တဂ်များ- | <address>၊ <blockquote>၊ <body>၊ <caption>၊ <center>၊ <dd>၊ <dir>၊ <div>၊ <dl>၊ <dt>၊ <fieldset>၊ <form>၊ <h1 > မှ <h6>၊ <html>၊ <li>၊ <menu>၊ <object>၊ <ol>၊ <p>၊ <pre>၊ <select>၊ <tbody>၊ <textarea>၊ <tfoot>၊ <thead>၊ <ul> |
DOM ဗားရှင်း- | အဆင့် 2 ပွဲများ |
နောက်ထပ် ဥပမာများ
ဥပမာ
မတူညီသော scroll အနေအထားများရှိ အတန်းအမည်များကြားတွင် ပြောင်းရန် - အသုံးပြုသူသည် စာမျက်နှာ၏ထိပ်မှ 50 pixels အောက်သို့ဆင်းသောအခါ၊ အတန်းအမည် "test" အား အစိတ်အပိုင်းတစ်ခုသို့ ပေါင်းထည့်လိမ့်မည် (နောက်တစ်ကြိမ်ထပ်၍ scroll လုပ်သည့်အခါ ဖယ်ရှားလိုက်သည်)။
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 pixels အောက်သို့ လှိမ့်ချလိုက်သောအခါ ( slideUp အတန်းကို ထည့်ပါ ) ။
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}