Help! overflow-x not working when I middle-click and scroll.

[JosephLeo]

http://jsfiddle.net/JosephLeo/LhsGe/embedded/result/

So I’m working on a pure CSS slide-out sidebar and it’s going pretty good. It has a few features that I’m pretty proud of but one feature is still buggy.

The capabilities of my slide-out sidebar are as follows.

1. invisible buffer area to trigger the slide.
2. unclassed divs get covered by the slide.
3. flex class elements are “squeezed” and “stretched” with the slide.
4. push class elements are “pushed away” by the slide and their width is preserved.

The one I’m having a problem with is the “Push” elements. even with overflow-x: hidden; I’m having a problem that I have a feeling is unfixable.

When you middle click within the slide-out side bar and scroll to the right you will be able to scroll to the right. This completely breaks that feature! Can anyone assist me with this?

EDIT: To make the slide-out appear, hover your mouse over the left side of the screen. I made the buffer 200px wide, but in a real world environment I would make it 25px wide.

http://jsfiddle.net/JosephLeo/LhsGe/embedded/result/

[Paulie_D]

Middle click?

Seems very unintuitive for a menu.

[JosephLeo]

I think I described the bug wrong.

The bug happens when you middle-click within the slide-out sidebar.

If you middle-click the slide-out scrollbar while it’s slid out and on display, despite the overflow-x: hidden; attribute applied to HTML and the Body, you will still be able to scroll by using the middle-scroll (aka autoscroll). This is not the desired effect and I wish to disable it somehow.

However, I suspect that this is just how auto-scroll functions and it’s not something that can be disabled on the developers end.

[Author]

Posts