เหตุการณ์ onwheel ทำงานเมื่อลูกเลื่อนเมาส์ (mouse wheel) ถูกเลื่อนขึ้นหรือลงขณะที่เคอร์เซอร์อยู่เหนือองค์ประกอบ นี่คือเหตุการณ์มาตรฐานแทน onmousewheel (IE/Chrome เก่า) และ DOMMouseScroll (Firefox เก่า)
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h3 id="myid" onwheel="mouseWheel()" style="cursor: pointer;">
นี่คือหัวข้อตัวอย่าง
</h3>
<p>วางเมาส์บนหัวข้อและเลื่อนลูกเลื่อนเพื่อเปลี่ยนสี</p>
<script>
function mouseWheel() {
document.getElementById("myid").style.color = "red";
}
</script>
</body>
</html>ตัวอย่างขั้นสูง: ป้องกันการเลื่อนหน้าเว็บ (Prevent Default Scroll)
<div id="scrollable" style="height: 200px; overflow: auto; border: 1px solid #ccc;" onwheel="handleWheel(event)">
เนื้อหายาวมาก... <br>.repeat(20)
</div>
<script>
function handleWheel(e) {
// เลื่อนเฉพาะใน div นี้ ไม่ให้หน้าเว็บเลื่อน
const div = e.currentTarget;
if (div.scrollHeight > div.clientHeight) {
// มีสกอรลล์บาร์ ให้เลื่อนปกติ
return;
}
// ไม่มีสกอรลล์ ป้องกันการเลื่อนหน้า
e.preventDefault();
}
</script>WheelEvent Properties
deltaY> 0 = เลื่อนลง, < 0 = เลื่อนขึ้นdeltaX= การเลื่อนแนวนอน (Trackpad/Horizontal wheel)deltaMode: 0=Pixel, 1=Line, 2=Page
