问题:

If I have a div with the style overflow: hidden; I found that there are times when keyboard actions can cause the div to scroll anyway. And since there are no scrollbars, there is really no way to make the div go back to its original state. Is anything I should do in addition to specifying the style to prevent this?

For example when you select the L with the mouse (in the fiddle) and after that you press the down arrow key while holding down shift (i.e. expanding the selection).

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

Or another scenario is when there is a textarea in the div: http://jsfiddle.net/h6Bhb/1/

回答1:

A simple solution would be to disable text-select in the relevant element. Therefor preventing the possibility to use the arrow keys to select more..

To prevent tekst select you need to event.preventDefault() in the mousedown event with JS.

For your fiddle that could look like this in modern standards compliant browsers:

Edit

Or as @JimThomas pointed out in the comments you can disable text select using CSS, ofcourse this doesn't enjoy as much support as the JS solution. How to disable text selection highlighting using CSS?

I couldn't think of a more graceful or more complete (this doesn't solve problems you might have with inputs) solution, and I'm not sure if there even is one...

回答2:

Add this to your div CSS:

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

Does not work in < IE10 or Textarea, but I don't believe anything will prevent the textarea scenario unless you disable the textarea itself to prevent selection.

... or go with JS solution.

转载请标明出处:Keeping overflow:hidden really hidden

文章来源: Keeping overflow:hidden really hidden

标签

overflow

select