เหตุการณ์ onwheel: รันสคริปตเมื่อเลื่อนลูกเลื่อนเมาส์บนองค์ประกอบ

เหตุการณ์ onwheel จะถูกกระตุ้นเมื่อผู้ใช้เลื่อนลูกเลื่อนเมาส์ (mouse wheel) ขณะที่เคอร์เซอร์อยู่เหนือองค์ประกอบ HTML นี้ แทนที่เหตุการณ์เก่าๆ เช่น onmousewheel และ DOMMouseScroll

ตัวอย่างการใช้งาน

ตัวอย่างแสดงการแจ้งเตือนเมื่อเลื่อนลูกเลื่อนเมาส์:

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div id="myDIV" onwheel="display()" style="padding: 20px; border: 1px solid #ccc; width: 300px; height: 150px; overflow: auto;">
        นี่คือข้อความตัวอย่าง ลองเลื่อนลูกเลื่อนเมาส์ที่นี่
        <br><br><br><br><br><br><br><br><br>
        ข้อความเพิ่มเติมเพื่อให้มีสกอรลล์บาร์
    </div>
    <script>
        function display() {
            alert("ใช้ลูกเลื่อนเมาส์แล้ว!");
        }
    </script>
</body>
</html>

อ็อบเจกต์ WheelEvent

ฟังก์ชันจะรับอ็อบเจกต์ WheelEvent ที่มีคุณสมบัติสำคัญ:

ตัวอย่างขั้นสูง: ซูมภาพด้วยลูกเลื่อน

<img id="zoomImg" src="image.jpg" style="width: 300px; transition: transform 0.1s;" onwheel="zoom(event)">
<script>
    let scale = 1;
    function zoom(e) {
        e.preventDefault();
        scale += e.deltaY * -0.001;
        scale = Math.min(Math.max(0.5, scale), 3); // จำกัด 0.5x - 3x
        document.getElementById('zoomImg').style.transform = `scale(${scale})`;
    }
</script>