在谷歌浏览器中溢出隐藏并输入文字滚动 [英] Overflow hidden and input text scrolling in Google Chrome

问题描述

以下是我的代码段：

http： //jsfiddle.net/7CuBV/6/

如果我点击并拖动输入文本字段，就会得到带有溢出的div：隐藏滚动为它会与溢出：自动。如果我设置了overflow：隐藏在div上，我希望滚动可以像其他浏览器一样被锁定。

好奇的是，如果我在输入栏中设置了padding：0px，那么Chrome上的问题就不会再发生了。

这是Google Chrome的错误吗？任何解决方法，使其工作，而无需使用Javascript？

编辑：这种行为也发生在Safari 5上。也许这是一个Webkit问题。

解决方案

以下是为我修复的问题：

  input：active {pointer-events：none; } 
  

感谢 https://stackoverflow.com/users/498031/vken 在这个类似的问题上指出了这一点：问题与点击拖动选择文本输入字段也滚动父元素，WebKit的bug或功能？

更新2013-11：
指针事件：无修正这个问题却带有许多缺点。解决这个问题的最佳解决方法是确保你没有溢出的内容，因为 overflow：hidden 容器的内容并不比所述容器大。如果你想要通过JavaScript滚动内容，只要它被隐藏并且在移动它之前调整它的宽度和高度= 0（很容易通过关键帧动画或定时转换完成）​​

重要提示：我遇到了一个奇怪的情况，在Chrome中定制了< input type = file> 字段，这不应该导致任何溢出问题，因为我通过CSS - 开发工具证实，BUT：在看完 Shadow-DOM 之后，我意识到Chrome自己的按钮溢出了实际的输入字段，因此导致整个容器变得更大。

如何显示Shadow-DOM：如果事情看起来正确并且仍然是问题，请转至Chrome Dev-Tools，设置 - 按钮在右下角。在元素部分的常规选项卡中，启用显示阴影DOM选项。这会给你所发生的事情的全貌......虽然大部分时间它只是增加了另一层复杂性，但这真的很有帮助！

Here is my code snippet:

http://jsfiddle.net/7CuBV/6/

If i click and drag over the input text field, I get the div with overflow:hidden scrolling as it would do with overflow:auto. If I set overflow:hidden on a div, I want the scrolling to be locked as other browsers do.

The curious thing is that if I set padding:0px on the input field, the issue on Chrome does not occur anymore.

Is it a Google Chrome bug? Any workaround to make it work without the use of Javascript?

EDIT: This behaviour happens on Safari 5 too. Maybe it is a Webkit issue.

解决方案

Here's what fixed it for me:

input:active { pointer-events:none; }

Thanks to https://stackoverflow.com/users/498031/vken for pointing this out over at this similar question: Issue with click-drag-select in text input field also scrolls parent element, webkit bug or feature?

UPDATE 2013-11: pointer-events:none fixes the issue but comes with numerous disadvantages. Best workaround for the issue is actually to make sure you have no overflowing content as in "the content of the overflow:hidden container is not bigger than said container. If you want to scroll content in via JavaScript, give it width&height=0 as long as it's hidden and resize it only right before moving it in (easily done with keyframe-animations or timed transitions)

IMPORTANT: I encountered a weird case with a customized <input type=file> field in Chrome which should not have caused any overflow-issues as I resized it via CSS - the dev-tools confirmed that, BUT: After taking a look at the Shadow-DOM I realized that Chrome's own "buttons" overflowed the actual input-field and therefore caused the entire container to be bigger.

How to show Shadow-DOM: If things look right and it still is an issue go to Chrome Dev-Tools, click on the Settings-Button in the lower right corner. On the "General"-tab in section "Elements" is the option to enable "Show Shadow DOM". This will give you the entire picture of what's going on... Though most of the time it just adds another layer of complexity, here it's really helpful!

这篇关于在谷歌浏览器中溢出隐藏并输入文字滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！