Overflow persistence: hidden really hidden

Question

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

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

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

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

Answer 1

A simple solution would be to disable the selection of text in the corresponding element. To prevent the use of the arrow keys, select more.

To prevent tekst from being selected, you need event.preventDefault() in the mousedown event using JS.

For your violin, which might look like this in modern standards-compliant browsers:

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

Edit

Or, as @JimThomas noted in the comments, you can turn off text selection using CSS, of course, this is not as much as JS support. How to disable text selection highlighting using CSS?

I could not think of a more elegant or more complete (this does not solve the problems that may arise with input), and I am not sure that there is even ...

Answer 2

Add this to your CSS section:

 -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 do not believe anything will prevent the textarea script unless you disable textarea itself to prevent the selection.

... or go with a JS solution.