Completely disable horizontal scrolling, also in drop events

Question

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.

Have you given the body a specific width? – Gregg B Nov 26 '11 at 15:26 — Gregg B, Nov 26 '11 at 15:26

score 0 · Accepted Answer · answered Apr 17 '12 at 14:12

0

I ended up changing my initial requirements and thus the page design.

answered Apr 17 '12 at 14:12

Lorenzo Marcon

8,029
5
38
63

score -1 · Answer 2 · answered Nov 26 '11 at 15:23

-1

And what if you do not place the panel at right: -100px, but give it a width of 100px and place it at right: 0px?

Then on mouseover animate the width to 200px. It still feels like a slide. I don't know if the content of your panel allows the change of the width, but maybe you can give the panel an overflow: hidden too.

answered Nov 26 '11 at 15:23

timing

6,340
1
17
16

well ok that would be a workaround, but it doesn't fix the main problem, it's just another way to handle it. – Lorenzo Marcon Nov 26 '11 at 15:37
What's up with the downvote. This is my example: http://jsfiddle.net/timing/ZAuaw/ – timing Nov 26 '11 at 15:37
It's not me that downvoted you; anyway long lines wraps with your workaround, and that's not what I need. http://jsfiddle.net/ZAuaw/3/ Nevertheless, thanks for your time. – Lorenzo Marcon Nov 26 '11 at 18:02
white-space: nowrap; might help with that. – timing Nov 28 '11 at 12:54

Completely disable horizontal scrolling, also in drop events

2 Answers2