Question

我有一个非常奇怪的CSS＆＃34; bug＆＃34;。

我目前正处理滑块事物（幻灯片上有表单元素）。当我点击＆amp;在幻灯片中的标签上拖动（向右滚动），然后container滚动，当容器上设置属性overflow: hidden;时，下一张幻灯片可见。

我发现当存在label标记时，溢出属性正常。

有没有人有解决方案？我尝试了很多CSS的东西但没有成功。我在这里重新创建了JsFiddle中的错误：clicky

更新

点击＆amp;拖动bug只出现在Chrome中。（我测试了IE和FF）
另外，关于ul list与labels的滚动条，不，但关于您可以点击{{1}的事实}和label向右滚动到下一张幻灯片。

Answer 1

这是Chromium中的一个已知错误（Google Chrome基于此），请参阅：http://code.google.com/p/chromium/issues/detail?id=116655

由于Safari和Chrome似乎都显示了这个问题，因此我猜测这个错误通常适用于所有基于webkit的浏览器。

不幸的是，Chromium开发没有回应。我建议您在提供的链接上投票支持此问题，以帮助在未来的修订版中解决此问题。

Answer 2

这是使用jQuery的解决方法。

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

如果要水平滚动，请将scrollTop替换为scrollLeft

Answer 3

如果您将HTML元素的“溢出”更改为“隐藏”，则会阻止其滚动。唯一的问题是'mousemove'事件。如果在鼠标按下时禁用滚动（overflow = hidden），它将正常工作。如果你在鼠标移动（例如拖动）时这样做，它将无法工作。所以你应该禁止滚动从'onmousemove'到'onmousedown'。

溢出隐藏，但仍能滚动（仅限Chrome）

更新

3 个答案: