Question

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/

Answer 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:

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

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…