Detect when a scrollable div is "focused" in Firefox?

Question

Firefox has a behavior where, if you click on a scrollable div , then that div will respond to all the mouse buttons and the up / down keys of the page, which makes it “focused”. However, the HTML5 specification dictates that divs cannot be "focused", technically. Therefore, although the div accepts keyboard and mouse events, it does not appear in the document.activeElement or DOMActivate event handler.

So, how can I determine when a scrollable div has focus scrolling in Firefox? Here is the test page . Oddly enough, the div reported in document.activeElement when you paste into it, but this is the only time this happens. Listening for click and scroll events may be a scroll , but I'm not sure if this is the best solution?

EDIT: This is a Firefox extension, so any JS chrome level would be acceptable. It also means that I cannot edit or predict how certain pages are encoded.

Answer 1

If you assign the attribute / property <div> a tabindex (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 flow of tabs completely), then it can trigger focus and blur events . Some simple CSS may eliminate outline if you find this undesirable, but it may be desirable for usability reasons.