Question

如果我有一个样式为overflow: hidden;的div，我发现有时键盘操作会导致div无论如何都会滚动。由于没有滚动条，因此实际上没有办法使div恢复到原始状态。除了指定样式以防止这种情况之外，我还应该做些什么吗？

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

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

Answer 1

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

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

对于你的小提琴，在现代标准兼容的浏览器中看起来像这样：

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

修改

或者@JimThomas在评论中指出你可以使用CSS禁用文本选择，当然这并不像JS解决方案那样得到尽可能多的支持。 How to disable text selection highlighting using CSS?

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

Answer 2

将此添加到您的div CSS：

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

不适用于＆lt; IE10或Textarea，但我不相信任何会阻止textarea场景，除非您禁用textarea本身以防止选择。

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

保持溢出：隐藏真的隐藏

2 个答案: