ตัวอย่าง
รัน JavaScript เมื่อ <div> องค์ประกอบที่จะถูกเลื่อน:
<div onscroll="myFunction()"> ลองตัวเอง» ความหมายและการใช้งาน
เหตุการณ์ที่เกิดขึ้นเมื่อ OnScroll เลื่อนเป็นองค์ประกอบที่จะถูกเลื่อน
เคล็ดลับ: ใช้แบบ CSS ล้น โรงแรมสไตล์เพื่อสร้างเลื่อนสำหรับองค์ประกอบ
สนับสนุนเบราว์เซอร์
| เหตุการณ์ | |||||
|---|---|---|---|---|---|
| onscroll | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
วากยสัมพันธ์
ใน HTML:
ใน JavaScript:
object .onscroll=function(){ ลองตัวเอง» ใน JavaScript โดยใช้ addEventListener() วิธีการ:
object .addEventListener("scroll", myScript );
ลองตัวเอง» หมายเหตุ: addEventListener() วิธีการที่ไม่ได้รับการสนับสนุนใน Internet Explorer 8 และรุ่นก่อนหน้านี้
รายละเอียดทางเทคนิค
| บับเบิ้ล: | ไม่ |
|---|---|
| ยกเลิก: | ไม่ |
| ประเภทเหตุการณ์: | UIEvent |
| แท็ก HTML ที่รองรับ: | <address> <blockquote> <body> <คำบรรยายใต้ภาพ> <center> <DD> <dir> <div> <DL> <dt> <fieldset> <form>, <h1> ที่ <h6> <html> <li> <เมนู> <object> <ol> <p> <pre> <เลือก> <tbody> <textarea> <tfoot> <thead> <ul> |
| DOM เวอร์ชัน: | ระดับที่ 2 เหตุการณ์ |
ตัวอย่างอื่น ๆ
ตัวอย่าง
สลับระหว่างชื่อชั้นบนเลื่อนตำแหน่งที่แตกต่างกัน - เมื่อผู้ใช้เลื่อนลง 50 พิกเซลจากด้านบนของหน้าชื่อชั้น "test" จะถูกเพิ่มองค์ประกอบ (and removed when scrolled up again)
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 พิกเซลจากด้านบนของหน้า (add the slideUp class) :
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop >
350) {
document.getElementById("myImg").className = "slideUp";
}
ลองตัวเอง» <object เหตุการณ์