คุณสมบัติ deltaY ของ HTML DOM WheelEvent ใช้สำหรับคืนค่าตัวเลขที่มีเครื่องหมาย (signed number) ที่บ่งชี้ว่าผู้ใช้กำลังเลื่อนขึ้นหรือลง หากผู้ใช้เลื่อนในทิศทางอื่น คุณสมบัตินี้จะคืนค่า 0
ไวยากรณ์ (Syntax)
การคืนค่าตัวเลขที่มีเครื่องหมาย
event.deltaY
ตัวอย่างการใช้งาน
ตัวอย่างต่อไปนี้แสดงการใช้งานคุณสมบัติ HTML DOM WheelEvent deltaY:
<!DOCTYPE html> <html> <head> <title>HTML DOM WheelEvent deltaY</title> <style> * { padding: 2px; margin:5px; } form { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } #content { width: 80px; height: 80px; margin: 20px 0 0 50px; background-color: #dc3545; transition: all 2s ease-in-out; } </style> </head> <body> <form> <fieldset> <legend>HTML-DOM-WheelEvent-deltaY</legend> <div id="content" onwheel="setControls(event)"></div> <input type="button" value="reset" onclick="resetCSS()"> <div id="divDisplay">Scroll over div element</div> </fieldset> </form> <script> var playDiv = document.getElementById("content"); var count = 40; function setControls(event) { var valX = event.deltaX; var valY = event.deltaY; if(valY>0){ playDiv.style.transform = "scale(0.5)"; playDiv.style.backgroundColor = "rgba(0, 188, 212, 0.47)"; playDiv.style.borderRadius = "50%"; } else if(valY<0){ playDiv.style.transform = "scale(1.5)"; playDiv.style.backgroundColor = "rgba(0, 188, 0, 0.47)"; playDiv.style.borderRadius = "0px"; } else if(valX>0){ count+=40; playDiv.style.transform = "translateX("+count+"px)"; } else{ count-=40; playDiv.style.transform = "translateX("+count+"px)"; } } function resetCSS(){ count = 40; var st = "width: 80px;height: 80px;margin: 20px 0 0 50px;background-color: #dc3545;transition: all 2s ease-in-out;"; playDiv.style = st; } </script> </body> </html>
ผลลัพธ์
เลื่อนบนองค์ประกอบ div ในทิศทางลง:
เลื่อนบนองค์ประกอบ div ในทิศทางขึ้น:
คลิกปุ่ม reset:
