CODEWITHSUNDEEP
htmlcss
user823527
user823527

Reputation: 3712

Keeping overflow:hidden really hidden

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/

Upvotes: 4

Views: 234

Answers (2)

kmiyashiro
kmiyashiro

Reputation: 2249

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.

Upvotes: 0

sg3s
sg3s

Reputation: 9567

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...

Upvotes: 1

Related Questions