The HTML DOM WheelEvent deltaX property returns a signed number corresponding to whether user is scrolling left or right, if user is scrolling in any other direction this property returns 0.
Syntax
Following is the syntax −
Returning signed number
event.deltaX
Let us see an example of HTML DOM WheelEvent deltaX property −
Example
<!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">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>
Output
Scrolling over div element in left direction −
Scrolling over div element in right direction −
Clicking reset button −