溢出隐藏,但仍能滚动(仅限Chrome)

时间:2012-10-12 12:20:58

标签: html css scroll overflow

我有一个非常奇怪的CSS" bug"。

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

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

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

更新

  • 点击&拖动bug只出现在Chrome中。 (我测试了IE和FF)
  • 另外,关于ul listlabels的滚动条,,但关于您可以点击{{1}的事实}和label向右滚动到下一张幻灯片。

3 个答案:

答案 0 :(得分:9)

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

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

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

答案 1 :(得分:2)

这是使用jQuery的解决方法。

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

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

答案 2 :(得分:2)

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