这是我的代码片段:
http://jsfiddle.net/7CuBV/6/
如果我单击并拖动输入文本字段，我会得到带有溢出的 div:隐藏滚动，就像它使用溢出:自动一样。如果我在 div 上设置溢出:隐藏，我希望滚动像其他浏览器一样被锁定。
奇怪的是，如果我在输入字段上设置 padding:0px，Chrome 上的问题就不会再发生了。
这是谷歌浏览器的错误吗？有什么解决方法可以使其在不使用 Javascript 的情况下工作？
编辑:这种行为也发生在 Safari 5 上。可能是 Webkit 的问题。
最佳答案
这是为我解决的问题:
input:active { pointer-events:none; }
感谢 https://stackoverflow.com/users/498031/vken在这个类似的问题中指出这一点:Issue with click-drag-select in text input field also scrolls parent element, webkit bug or feature?
2013-11 更新:
pointer-events:none解决了这个问题，但有很多缺点。该问题的最佳解决方法实际上是确保您没有溢出的内容，如“overflow:hidden 容器的内容不大于所述容器。如果您想通过 JavaScript 滚动内容，请给它 width&height=0 一样长因为它是隐藏的，并且只在移动它之前调整它的大小(使用关键帧动画或定时转换很容易完成)重要提示:我遇到了一个带有定制
<input type=file> 的奇怪案例Chrome 中的字段，当我通过 CSS 调整它的大小时，它不应该引起任何溢出问题 - 开发工具证实了这一点，但是:在查看 之后Shadow-DOM 我意识到 Chrome 自己的“按钮”溢出了实际的输入字段，因此导致整个容器变大。如何显示 Shadow-DOM:如果一切正常，但仍然存在问题，请转到 Chrome 开发工具，单击右下角的设置按钮。在“元素”部分的“常规”选项卡上是启用“显示阴影 DOM”的选项。这将为您提供正在发生的事情的全貌......虽然大多数时候它只是增加了另一层复杂性，但它真的很有帮助!
关于google-chrome - Google Chrome 中的溢出隐藏和输入文本滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10900210/