在文本输入字段中使用click-drag-select的问题还会滚动父元素,webkit错误或功能？

Question

自去年以来,我一直在使用webkit浏览器进行一种奇怪的行为,这让我感到疯狂.

我已尝试对此进行搜索,但我似乎无法点击与此问题相关的关键字.

我有一个html结构如下:

<div style="border: 1px solid #000; width:200px;height:200px; overflow:hidden;position:relative">
    <div style="width:200px;position:absolute">
        <p>long line</p>
        <p><input type="text" value=""/></p>
        <p>long line</p>
    </div>
</div>?

您可以访问jdfiddle链接中的实例: jsfiddle

对我来说,使用Chrome(18),当单击并拖动 - 从输入框中选择文本输入字段中的文本时,您可以"滚动"父元素,尽管CSS溢出设置为隐藏.

您可以通过单击选择 - 向右,向上,向下,向左拖动来从小提琴中尝试.令人惊奇.

更复杂的html结构会产生更多混乱的滚动行为.事实上,我几乎可以做一个幻灯片放映动画,其中元素滑动并按顺序滑出,只需拖动选择即可.

幸运的是,在firefox中没有遇到这种行为.

有没有人经历过这种行为？这应该是webkit的一个功能吗？有谁知道如何禁用这种"滚动"行为？

谢谢!

编辑:感谢@PhilipK,他找到了一个相关帖子,下面回答了javascript解决方案.由于我的网页上有大量的javascript,我想知道是否有任何可能的CSS解决方案.

edit2:感谢@tiffon,他找到了另一个javascript解决方案.他的解决方案可以在CSS中实现(但是鼠标事件有一些限制,因此CSS解决方案有点不完整).

Answer 1

我认为滥用pointer-events: none;可能是另一种选择:

Dupe问题:https://stackoverflow.com/a/13897395/1888292

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

Answer 2

所以这对我有用 - 请参阅此处- 基本上监听onscroll事件并将scrollTop和设置scrollLeft为 0。