ເຫດການ onscroll

ການສະແດງເຫດການ DOM ໂອເມວໂດມ Event

ການອະທິບາຍ ແລະ ການນໍາໃຊ້

ເຫດການ onscroll ຈະເກີດຂຶ້ນເມື່ອຕິດຕາມພາບຂອງອັນຕະລາງຖືກຄິດດ້ານຫຼັງ.

ຂໍ້ສັງເກດ:ຟັງ CSS overflow ທະວີຄຸນທີ່ສ້າງຕິດຕາມພາບສຳລັບອັນຕະລາງ.

ຄວາມຈິງ

ຕົວຢ່າງ 1

ດຳເນີນ JavaScript ໃນການຄິດດ້ານຫຼັງ <div>:

<div onscroll="myFunction()">

ทดลองด้วยตัวเอง

ຕົວຢ່າງ 2

ການແຍກພຶດສະພາບບັນດາອັນຕະລາງລະຫວ່າງຄຸນສະແຫວງ - ເມື່ອຜູ້ນຳໃຊ້ຕິດຕາມຈາກສຸດເວລາບອກມາລຸ່ມ 50 ຈຸມນີ້ສຳລັບອັນຕະລາງ (ຈະຖືກຕັດອອກຖ້າກັບຄືນຫາເວລາບອກມາລຸ່ມສຳລັບຄັ້ງຫນັງ).

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

ทดลองด้วยตัวเอง

ตัวอย่าง 3

เมื่อผู้ใช้เลื่อนหน้าลงจากด้านบนของหน้า 350 พิกเซล ลงใช้ slideUp คลาส (เพิ่ม 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 ถึง h6, html, li, menu, object, ol, p, pre, select, tbody, textarea, tfoot, thead, ul
ສະເພາະໂອເມວໂດມ DOM: ເຫດການລະດັບ 2

ການສະໜັບສະໜູນບັນດາການສະແດງ

ເຫດການ Chrome IE Firefox Safari Opera
onscroll ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ ສະໜັບສະໜູນ
ການສະແດງເຫດການ DOM ໂອເມວໂດມ Event