自去年以来，我一直在使用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解决方案有点不完整）。
所以这对我有用 - 看 这里 - 基本上听听 onscroll 事件并设置两者 scrollTop 和 scrollLeft 到0。
我发现了这个问题，经过一些实验，我删除了一个 overflow:hidden 来自其中一位父母 divs（非常外面的 div 这是滚动），它似乎解决了它。我没有使用任何iframe。
我知道这是一个旧线程，但我刚遇到同样的问题。
我创建了这个修复：
// DISABLE INPUT DRAG SCROLL (CHROME BUG FIX)
var disableScrollDrag = false;
$('input, select, textarea').unbind('mousedown').mousedown(function(e) {
disableScrollDrag = true;
$(this).css('pointer-events', 'none').addClass('disable-scroll-drag');
});
$('body').mousemove(function() {
if (disableScrollDrag === true) {
$('.disable-scroll-drag').each(function () {
$(this).css('pointer-events', 'auto');
});
disableScrollDrag = false;
}
});
刚刚第一次与这个奇怪的人搏斗。我发现如果我将文本字段的宽度设置为小于或等于容器的值，则父元素不会相对于文本输入值滚动。
链接到上面的示例提供了基本的想法，但它是关于iframe的，并且在div中的文本输入上实现可能有点混乱，这是我（和原始海报）所面对的。
这是我最终做的事情，使用jquery;
$('body').on('select', '.my_text_input', function(e) {
$('.div_that_was_moving_weirdly').scrollLeft(0);
return false;
});
这仍然是不完美的，因为会有一个震动滚动然后跳回来，因为在你完成选择之前，选择事件似乎没有开始。我尝试了各种各样的活动，但这是我能做的最好的事情。