HTML DOM Element scrollTop သုံးသပ်

ဒီပုံစံ နှင့် အသုံးပြုခြင်း

scrollTop သုံးသပ် ပြင်ဆင် သို့မဟုတ် အပြီးအဖြစ် အရင်းအမြစ်၏ အရှည်ချင်း လျင်းခြင်း ပမာဏ ကို ပြန်လည်ပေးပါ:

တစ်ရပ်တစ်ရပ် ကြည့်ရမည်:

scrollLeft သုံးသပ်

CSS overflow ဗဟုသုတ

onscroll အခမ်းအနား

အကျယ်အဝန်

အမှတ် 1

မည်သည့် "myDIV" အရင်းအမြစ်၏ လျင်းခြင်း ပမာဏ ကို ရယူပါ:

const element = document.getElementById("myDIV");
let x = elmnt.scrollLeft;
let y = elmnt.scrollTop;

ကျွန်ုပ်ကိုယ် ကျင့်လေ့ကြံ့ပါ

အမှတ် 2

မည်သည့် "myDIV" အရင်းအမြစ်ကို 50 ပမာဏ လျှက်လျှက် လျင်းသည့် 10 ပမာဏ လျှက်လျှက် လျင်းပါ:

const element = document.getElementById("myDIV");
element.scrollLeft = 50;
element.scrollTop = 10;

ကျွန်ုပ်ကိုယ် ကျင့်လေ့ကြံ့ပါ

အမှတ် 3

မည်သည့် "myDIV" အရင်းအမြစ်ကို အခြေခံစက် 50 ပမာဏ လျှက်လျှက် သို့ လျင်းသည့် 10 ပမာဏ လျှက်လျှက် သို့ လျင်းပါ:

const element = document.getElementById("myDIV");
element.scrollLeft += 50;
element.scrollTop += 10;

ကျွန်ုပ်ကိုယ် ကျင့်လေ့ကြံ့ပါ

အမှတ် 4

body အကျုပ် အရာဝတ္တု ကူးခြင်း ကို 30 ပမာဏ ကူးခြင်း ပြုလုပ် ခြင်း - ကိုယ်လုံး ကူးခြင်း ကို 10 ပမာဏ ကူးခြင်း ပြုလုပ် ခြင်း

const html = document.documentElement;
html.scrollLeft += 30;
html.scrollTop += 10;

ကျွန်ုပ်ကိုယ် ကျင့်လေ့ကြံ့ပါ

အမှတ် 5

ကူးခြင်း အခြေအနေ မျိုးမျိုး အကျုပ် အမည် ပြောင်းလဲခြင်း ပါဝင်သည် - အသုံးပြုသူ ဘက်ဆိုင်ရာ စာသင်းခေါင်းမှ အောက်သို့ 50 ပမာဏ ကူးခြင်း ပြုလာခဲ့ပါက၊ အကျုပ် အမည် "test" ပေါ်သွင်းခြင်း ပါဝင်သည် (နှင့် အောက်သို့ ကူးခြင်း ပြုလာခဲ့သော် ဖြစ်ပျက်လာသည်)

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  }
    document.getElementById("myP").className = "";
  }
}

ကျွန်ုပ်ကိုယ် ကျင့်လေ့ကြံ့ပါ

အမှတ် 6

အသုံးပြုသူ ဘက်ဆိုင်ရာ စာသင်းခေါင်းမှ အောက်သို့ 350 ပမာဏ ကူးခြင်း ပြုလာခဲ့ပါက၊ အရာဝတ္တု ကူးခြင်း ကို slideUp အကျုပ် ပေါ်သွင်းခြင်း ပါဝင်သည်

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

ကျွန်ုပ်ကိုယ် ကျင့်လေ့ကြံ့ပါ

ပြောင်းလဲခြင်း

scrollTop အကျုပ် ပြန်လည်ပေးခြင်း

element.scrollTop

scrollTop အကျုပ် အပိုင်းစင်းခြင်း ပြုလုပ်ခြင်း

element.scrollTop = pixels

အကျုပ် အမှတ်

အမှတ် ဖော်ပြချက်
pixels

အရာဝတ္တု ကူးခြင်း ပြောင်းလဲတတ်သော ပမာဏ ပိုင်းစင်းသည်

  • အမှတ် အန္တရာယ် ဖြစ်လာခဲ့ပါက၊ အမှတ် အပိုင်းစင်း ခြင်း ပါဝင်သည်
  • အရာဝတ္တု ကူးခြင်း မရှိသဖြင့် ပမာဏ အပိုင်းစင်း ခြင်း ပါဝင်သည်
  • အမှတ် သည် ခွင့်ပြုထားသော အမြင့်ဆုံး ပမာဏ ထက် အကြီးစွာ ဖြစ်လာခဲ့ပါက၊ အမှတ် အပိုင်းစင်းခြင်း ပါဝင်သည်

ပြန်လည်ပေးသော အမှတ်

အမျိုးအစား ဖော်ပြချက်
ပမာဏ အရာဝတ္တု ကူးခြင်း ပြောင်းလဲတတ်သော ပမာဏ ပိုင်းစင်းသည်

လွှတ်တော်ကူးခြင်း အပြည့်အဝိုင်း

တိုက်ရိုက်လွှတ်တော်များအား အပြည့်အဝိုင်း လွှတ်တော်ကူးခြင်း ပါဝင်သည် element.scrollTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့ ထောက်ပံ့