I got a html page with a sliding panel on the right. This panel is 200px wide, position: fixed, and its position is initially set to right: -100px (halfway outside of the clientArea). Overflow-x is set to hidden for body, html (css), and the panel accepts mouseover events and drop events. On mouse over, the panel slides to right: 0.
If I drag a draggable element on this panel, the panel correctly slides to left, but the window starts to scroll to right, which is an unwanted behaviour.
I also tried a javascript solution as described here: Disable horizontal scroll with JavaScript
but is’s a bad workaround because it make the clientArea start flickering.
What is the best way to completely disable horizontal scrolling? Possibly a cross browser solution.
Thanks
Update:
It’s not the sliding panel causing the issue, but the helper object of the draggable element (I’m using jquery-ui), which is anchored to the mouse position at top left while dragging. Imagine the helper object as a div 200x100px. When dragged to the rightmost part of the window area, the issue shows up scrolling the window to the right, instead of clipping the helper (and not scroll the window). I sort of manage this by anchoring the mouse to the top right corner of the helper during the drag operation, but I’m still curious if there is any way to completely disable the horizontal scroll of the window. I supposed the helper object to be completely “detached” from the page flow (as happens using position: absolute in css), but apparently it’s not.
I ended up changing my initial requirements and thus the page design.