Menu
Firefox has a behavior where, if you click on a scrollable div, then that div responds to all the mousewheel and the Page Up/Down keys, effectively making it "focused". However, the HTML5 spec dictates that divs cannot be "focused", technically. Therefore, even though the div receives keyboard and mouse events, it's not reported in document.activeElement or a DOMActivate event handler.
So how can I detect when a scrollable div has scrolling focus in Firefox? Here's a test page. Oddly, the div is reported in document.activeElement when you tab into it, but that's the only time that happens. A workaround might be to listen for click and scroll events instead, but I'm not sure if that's the best solution?
EDIT: This is for a Firefox extension, so any chrome-level JS would be acceptable. This also means I can't edit or predict how certain pages are coded.
484
asked May 27 '11 01:05
Yes - this is possible. In order to do it, you need to assign a tabindex... A tabindex of 0 will put the tag "in the natural tab order of the page". A higher number will give it a specific order of priority, where 1 will be the first, 2 second and so on.
Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable. Example 1: html.
The content in the <div> is scrollable, but neither the <div> itself nor any of its content is tabbable. As a result, keyboard users can't operate the scrollbar to see all of the content.
If you assign the <div> a tabindex attribute/property (you can set it to 0 to make it focusable in the normal flow of the document, or -1 to remove it from the normal tab flow entirely), then it can fire focus and blur events. Some simple CSS can eliminate the outline if you find it undesirable, but it may be desirable for usability reasons.
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
