保持overflow:hidden的真正隐藏

Question

如果我有一个带有样式overflow: hidden;的div，我发现有时键盘操作会导致div滚动。由于没有滚动条，真的没有办法使div恢复到原来的状态。除了指定样式以防止这种情况发生，还有什么其他方法吗？

例如，在鼠标选择L后（在fiddle中），您按住shift键并按下向下箭头键（即扩展选择）。

http://jsfiddle.net/PeeHaa/H34mM/

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

- user823527

---

“键盘操作”具体指什么？是在设置属性overflow:hidden的同一元素内进行键盘操作吗？ - creativeby

@creativeby 我已经添加了一个fiddle并更新了问题。 - PeeHaa

另一种情况是文本区域。在其中放置光标并按右箭头键 http://jsfiddle.net/h6Bhb/1/ - Tina CG Hoehr

顺便说一下，这是预期的行为。 - BoltClock

Answer 1

一个简单的解决方案是禁用相关元素中的文本选择。这样可以防止使用箭头键选择更多内容。

为了防止文本选择，您需要在JS中的mousedown事件中使用event.preventDefault()。

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

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

编辑

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

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

- sg3s

---

这里演示了一个纯CSS禁用选择的例子，但它基于特定于浏览器的样式。在你的第一个fiddle中尝试了一下，似乎可以工作。https://dev59.com/pnRA5IYBdhLWcg3wyRF6编辑：除非你禁用它，否则这对textarea没有帮助。 - Jim Thomas

@JimThomas 我不知道那些CSS属性 :) - sg3s

那可能是因为它们不是标准的一部分 :) - Jim Thomas

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;

不支持IE10或Textarea，但我认为除非禁用Textarea本身以防止选择，否则没有任何东西会阻止Textarea的情况。

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

- kmiyashiro

---

不修复第二种情况，我的也是如此，但你应该至少提一下。 - sg3s