Overflow is hidden, but still scrollable (Chrome only)

Question

I have a very strange CSS error.

I'm currently working on a slider (slides have form elements). When I click and drag (to the right to scroll horizontally) on the label in the slide, the container scrolls, and the next slide appears while the overflow: hidden; property is set in the container overflow: hidden; .

I found out that the overflow property works fine when NO label present.

Does anyone have a solution? I tried a lot of things in CSS, but did not succeed. I recreated the error in JsFiddle here: clicky

Update

• Click and drag error only appears in Chrome. (I tested IE and FF)
• In addition, it is NOT about the ul list scrollbar with labels , but that you can click on the label and drag right to go to the next slide.

Answer 1

This is a known bug in Chromium (based on this Google Chrome): http://code.google.com/p/chromium/issues/detail?id=116655

Since both Safari and Chrome seem to be showing the problem, I would jeopardize that this error is common to all webkit browsers.

Unfortunately, there was no answer from the development of Chromium. I suggest you vote for this issue through a link that will help you see it in future versions.

Answer 2

The following is a workaround using jQuery.

 $(your_slider).scroll(function(){ if($(this).scrollTop() != 0 ){ $(this).scrollTop(0) } }); 

If you scroll horizontally, replace scrollTop with scrollLeft

Answer 3

if you change the "overflow" of an HTML element to "hidden", it stops scrolling it. The only problem is the mousemove event. If you disable scrolling (overflow = hidden) with the mouse, this will work fine. If you do this while moving the mouse (for example, to drag and drop), this will not work. Therefore, you should disable scrolling from "onmousemove" to "onmousedown".