เหตุการณ์ onscroll

เหตุการณ์ DOM วัตถุ Event

การระบุและการใช้งาน

เหตุการณ์ onscroll ที่เกิดขึ้นเมื่อสายย้อนหลังขององค์ประกอบถูกเลื่อน

คำเตือน：ใช้ CSS overflow ขอบเขตรูปแบบสร้างสายย้อนหลังสำหรับองค์ประกอบ

ตัวอย่าง

ตัวอย่าง 1

ปฏิบัติ JavaScript ขณะเลื่อน <div> องค์ประกอบ

<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";
  }
    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> ถึง <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
เวอร์ชั่น DOM: เหตุการณ์ Level 2

การสนับสนุนเบราเซอร์

เหตุการณ์ Chrome IE Firefox Safari Opera
onscroll การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน
เหตุการณ์ DOM วัตถุ Event