html - 保持溢出：隐藏真的隐藏

Question

如果我有一个样式的 div，overflow: hidden;我发现有时键盘操作会导致 div 滚动。而且由于没有滚动条，所以真的没有办法让 div 回到原来的状态。除了指定样式以防止这种情况外，我还应该做什么？

例如，当您L使用鼠标（在小提琴中）选择时，然后在按住 shift 的同时按下向下箭头键（即扩展选择）。

或者另一种情况是当 div 中有一个 textarea 时：http: //jsfiddle.net/h6Bhb/1/

score 1 · Accepted Answer

一个简单的解决方案是在相关元素中禁用文本选择。因此防止使用箭头键选择更多的可能性..

为了防止 tekst 选择你需要event.preventDefault()在 mousedown 事件中使用 JS。

对于您在符合现代标准的浏览器中可能看起来像这样的小提琴：

// give the div an id
document.getElementById('div').addEventListener('mousedown', function(e) {
    e.preventDefault();
}, false);

编辑

或者正如@JimThomas 在评论中指出的那样，您可以使用 CSS 禁用文本选择，当然这不像 JS 解决方案那样受到支持。如何使用 CSS 禁用文本选择突出显示？

我想不出更优雅或更完整（这不能解决您可能遇到的输入问题）解决方案，而且我不确定是否有一个......

score 0 · Accepted Answer

将此添加到您的 div CSS：

-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none; /* IE10+ */
user-select: none;

在 < IE10 或 Textarea 中不起作用，但我不相信有任何东西会阻止 textarea 场景，除非您禁用 textarea 本身以防止选择。

...或使用 JS 解决方案。

2 回答 2