这是我的代码 sn-p：
如果我单击并拖动输入文本字段，我会得到带有溢出的 div：隐藏滚动，就像使用溢出：自动一样。如果我在 div 上设置了溢出：隐藏，我希望像其他浏览器一样锁定滚动。
奇怪的是，如果我在输入字段上设置 padding:0px，Chrome 上的问题就不会再出现了。
这是谷歌浏览器的错误吗？有什么解决方法可以在不使用 Javascript 的情况下使其工作？
编辑：这种行为也发生在 Safari 5 上。可能是 Webkit 的问题。
【问题讨论】：
标签： google-chrome input overflow drag hidden
这是为我解决的问题：
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 滚动内容，请将其宽度和高度 = 0因为它是隐藏的，并且仅在将其移入之前才调整其大小（通过关键帧动画或定时转换轻松完成）
重要提示：我在 Chrome 中遇到了一个带有自定义 <input type=file> 字段的奇怪案例，当我通过 CSS 调整它的大小时，它不应该导致任何溢出问题 - 开发工具证实了这一点，但是：在查看了Shadow-DOM 我意识到 Chrome 自己的“按钮”溢出了实际的输入字段，因此导致整个容器变大。
如何显示 Shadow-DOM： 如果一切正常，但问题仍然存在，请转到 Chrome 开发工具，点击右下角的设置按钮。在“元素”部分的“常规”选项卡上是启用“显示阴影 DOM”的选项。这将使您全面了解正在发生的事情......虽然大多数时候它只是增加了另一层复杂性，但它真的很有帮助！
【讨论】：
INPUT 字段
我也遇到过这个。到目前为止，我做得最好的事情是使用pointer-events:none;。我可以应用它的唯一方法是设置display: none;。否则它会被忽略，所以会短暂闪烁。
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);
}
【讨论】：
我使用 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');
}
});
问题是它不允许您选择字段内的文本，除非您使用键盘箭头键。
【讨论】：
在“onscroll”事件中将 scrollLeft 和/或 scrollTop 设置为 0，这将禁用滚动：
var div = $(".overflow-hidden");
div.scroll(function() { div.scrollTop(0).scrollLeft(0); });
【讨论】：