Disable mouse scroll when overflow-x: hidden [CSS,HTML]

css, html, javascript

Solution

I had the same problem, if you place it within a wrapper then it prevents trackpad scrolling.

#wrapper { 
    position: absolute;
    width: 100%;
    overflow-x: hidden;
}

Problem

PROBLEM: The contents of my div are positioned 'absolute' and the width of the contents are larger than the div. As required the "extra" contents are clipped using "overflow-x: hidden". Although, if I try to horizontal scroll using the mouse-scroller, the content get visible. How do I not let this happen ? I am fine with using a JS or/and a CSS solution e.g code ``` <body width='1000px'> <div style='background-color: blue; width: 1200px'>contents</div> </body> ``` Thanks !

Original source