11

自去年以来，我一直在使用 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 解决方案有点不完整）。

4

6 回答 6

6

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

重复问题：https ://stackoverflow.com/a/13897395/1888292

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

于 2012-12-16T00:16:00.473 回答
4

所以这对我有用 - 见这里- 基本上听onscroll事件并将两者都设置scrollTop为scrollLeft0。

于 2012-04-05T22:51:15.490 回答
2

我也发现了这个问题，经过一些实验后，我overflow:hidden从一个父divs（正在滚动的最外层div）中删除了一个，它似乎已经解决了它。我没有使用任何 iframe。

于 2012-10-31T12:14:49.287 回答
1

我知道这是一个旧线程，但我刚刚遇到了同样的问题。

我创建了这个修复：

// 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;
    }
});
于 2013-05-25T15:32:56.420 回答
0

上面链接的示例给出了基本思想，但它是关于 iframe 的，在 div 内的文本输入上实现可能会有点混乱，这是我（和原始海报）所面临的。

这就是我最终使用 jquery 做的事情；

$('body').on('select', '.my_text_input', function(e) {
        $('.div_that_was_moving_weirdly').scrollLeft(0);
         return false;
    });

这仍然是不完美的，因为会有一个不和谐的滚动然后跳回来，因为选择事件似乎在您完成选择之前不会启动。我尝试了各种活动，但这是我能做的最好的。

于 2012-10-24T01:21:00.620 回答
0

第一次和这个奇怪的人搏斗。我发现如果我将文本字段的宽度设置为小于或等于容器的宽度，则父元素不会相对于文本输入值滚动。

于 2012-08-03T19:45:02.957 回答