4

这是我的代码片段：

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

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

奇怪的是，如果我在输入字段上设置 padding:0px，Chrome 上的问题就不会再出现了。

它是谷歌浏览器的错误吗？任何解决方法可以使其在不使用 Javascript 的情况下工作？

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

4

4 回答 4

4

这是为我解决的问题：

input:active { pointer-events:none; }

感谢https://stackoverflow.com/users/498031/vken在类似的问题上指出了这一点：文本输入字段中的单击拖动选择问题也会滚动父元素、webkit 错误或功能？

2013-11 更新： pointer-events:none修复了该问题，但有许多缺点。该问题的最佳解决方法实际上是确保您没有溢出内容，如“overflow:hidden容器的内容不大于所述容器。如果您想通过 JavaScript 滚动内容，只要它被隐藏，就给它 width&height=0并仅在将其移入之前调整其大小（通过关键帧动画或定时转换轻松完成）

重要提示：我在 Chrome 中遇到了一个带有自定义<input type=file>字段的奇怪案例，当我通过 CSS 调整它的大小时，它不应该导致任何溢出问题 - 开发工具证实了这一点，但是：在查看Shadow-DOM之后，我意识到Chrome 自己的“按钮”溢出了实际的输入字段，因此导致整个容器变大。

如何显示 Shadow-DOM：如果一切正常，但问题仍然存在，请转到 Chrome 开发工具，单击右下角的设置按钮。在“元素”部分的“常规”选项卡上是启用“显示阴影 DOM”的选项。这将为您提供正在发生的事情的全貌......虽然大多数时候它只是增加了另一层复杂性，但它真的很有帮助！

于 2013-05-23T14:41:02.357 回答
2

我也遇到了这个。到目前为止，我做得最好的事情是使用pointer-events:none;. 我可以应用它的唯一方法是设置display: none;. 否则它会被忽略，所以会有一个短暂的闪烁。

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

var tx = document.getElementById('tx'),
    bod = document.body;

tx.addEventListener('mousedown', tx_ondown);

function tx_ondown() {
    bod.addEventListener('mousemove', b_onmove);
    bod.addEventListener('mouseup', b_onup);  
    bod.addEventListener('mouseout', b_onup);    
}

function b_onmove() {
    tx.style.pointerEvents = 'none';
    tx.style.display = 'none';

    setTimeout(function() {
        tx.style.display = '';
    }, 0);
    bod.removeEventListener('mousemove', b_onmove);
}

function b_onup() {
    if (tx.style.pointerEvents === 'none') {
        tx.style.pointerEvents = '';
    } else {
        bod.removeEventListener('mousemove', b_onmove);
    }
    bod.removeEventListener('mouseup', b_onup);
    bod.removeEventListener('mouseout', b_onup);        
}​
于 2012-12-16T00:11:15.340 回答
0

我使用 JQuery 尝试了 tiffon 的解决方案，但无法让它与多个字段一起使用，在我将指针事件设置为 none 后，mouseup 不会触发。

因此，将输入 'pointer-events' 设置为 none 可以解决滚动到隐藏内容的问题，但会阻止用户使用鼠标事件聚焦该字段。但我注意到单击标签仍然可以集中该字段。

所以我做了这个可行的解决方法，因为我的所有字段都嵌套在 div 中。基本上单击该字段不会使其聚焦，但仍会将事件冒泡到它的父级：

    $('label').click(function(e){
    e.stopPropagation();
});
$('input[type="text"], textarea').parent().click(function(){
    $(this).find('label').click();
});
$('input[type="text"], textarea').on({
    mousedown:function(){
        $(this).css('pointer-events', 'none');                  
    }
});

问题是它不允许您选择字段内的文本，除非您使用键盘箭头键。

于 2013-02-08T14:11:20.963 回答
0

在“onscroll”事件中将 scrollLeft 和/或 scrollTop 设置为 0，这将禁用滚动：

var div = $(".overflow-hidden");
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });
于 2013-05-10T14:09:42.720 回答