Thuộc tính deltaY 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 lên hay xuống, 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.deltaY
Ví dụ
Ví dụ minh họa thuộc tính 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">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 xuống:
Cuộn trên phần tử div theo hướng lên:
Nhấn nút reset:
