เหตุการณ์onscroll
ตัวอย่าง
เรียกใช้ JavaScript เมื่อมีการเลื่อนองค์ประกอบ <div>:
<div onscroll="myFunction()">
ความหมายและการใช้งาน
เหตุการณ์ onscroll เกิดขึ้นเมื่อแถบเลื่อนขององค์ประกอบถูกเลื่อน
เคล็ดลับ: ใช้คุณสมบัติสไตล์ โอเวอร์โฟ ลว์ CSS เพื่อสร้างแถบเลื่อนสำหรับองค์ประกอบ
รองรับเบราว์เซอร์
Event | |||||
---|---|---|---|---|---|
onscroll | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ใน HTML:
<element onscroll="myScript">
ในจาวาสคริปต์:
object.onscroll = function(){myScript};
ใน JavaScript โดยใช้เมธอด addEventListener() :
object.addEventListener("scroll", myScript);
หมายเหตุ:วิธีการaddEventListener()ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และเวอร์ชันก่อนหน้า
รายละเอียดทางเทคนิค
ฟองอากาศ: | ไม่ |
---|---|
ยกเลิกได้: | ไม่ |
ประเภทเหตุการณ์: | UiEventหากสร้างขึ้นจากส่วนต่อประสานผู้ใช้เหตุการณ์อย่างอื่น |
แท็ก HTML ที่รองรับ: | <ที่อยู่>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1 > ถึง <h6>, <html>, <li>, <เมนู>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <หัว>, <ul> |
รุ่น DOM: | กิจกรรมระดับ 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 = "";
}
}
ตัวอย่าง
เลื่อนในองค์ประกอบเมื่อผู้ใช้เลื่อนลง 350 พิกเซลจากด้านบนของหน้า (เพิ่มคลาส slideUp):
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}