Thuộc tính deltaX của WheelEvent trong HTML DOM trả về một số có dấu tương ứng với việc người dùng đang cuộn trái hay phải, nếu người dùng cuộn theo hướng khác thì thuộc tính này trả về 0.
Cú pháp
Trả về số có dấu:
event.deltaX
Ví dụ
Ví dụ minh họa thuộc tính HTML DOM WheelEvent deltaX:
<!DOCTYPE html> <html> <head> <title>HTML DOM WheelEvent deltaX</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-deltaX</legend> <div id="content" onwheel="setControls(event)"></div> <input type="button" value="reset" onclick="resetCSS()"> <div id="divDisplay">Cuộn chuột trên phần tử div</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>
Kết quả
Cuộn trên phần tử div theo hướng trái:
Cuộn trên phần tử div theo hướng phải:
Nhấn nút reset:
