0

It appears as though certain browsers allow a scrollable div element to receive focus - and then that element has focus the user can use the arrow keys and page up/down. I'm interested in learning everything I can about this functionality, because my company is trying to become fully 508 compliant.

My question is, what browsers support the focus event on a scrollable element?

I am trying to make a custom scroll bar component to make a more stylish scroll container to satisfy the UX (user experience) guys to make their layout pretty (yes I am aware this is likely not a good idea) I am going to make the component to satisfy their requirement.

Any other information/tips you can give here on how to make my custom scrollable div element be fully 508 compliant would be great.

Right now I'm considering the following:

  1. Focusing on the scrollable element allows arrow key up/down and page/up down... Which browsers? Is this all browsers?
  2. Middle mouse button should work (brings up a fast scroll with mouse movements)
  3. Mouse wheel should work
  4. If focused on something inside the scrollable element that doesn't normally use the arrow keys (such as input or textarea) then the arrow keys/page up/down will scroll the div

Is there any other way to move the scroll I am forgetting?

codefactor
  • 1,616
  • 2
  • 18
  • 41

2 Answers2

1

As you found out, a <div> isn't natively focusable. However you can make it focusable by adding tabindex="0" to the div; <div tabindex="0" style="overflow:auto;height:100px;">. This should be recognizable to browsers back to IE7.

The only browser that I know of that allows you to overrun scrollbars is IE, unless you do it in flash, maybe some JS.

Ryan B
  • 3,364
  • 21
  • 35
  • In my code I'm not "overrunning" the scroll bars - really I'm just hiding the scroll bars using a negative margin and then absolutely positioning my own scroll bars which using javascript will update the scroll position of the scrollable `div`. Also - after some experimentation I've found that a div without a tabindex is natively focusable in FireFox Latest (not sure what version it was added). And it appears IE and Chrome do not support it. I don't know about Safari. http://jsfiddle.net/VXsGw/ - Click inside the result pane and then press the tab key to focus around, FF will focus the div! – codefactor Feb 08 '13 at 07:07
  • I'm not very familiar with tabindex="-1" but what I can say is that using this fiddle http://jsfiddle.net/VXsGw/1/ on IE 9 you can see that tabbing through the buttons will skip the scrollable `div` which leads me to believe either something is missing or your answer is wrong. – codefactor Feb 08 '13 at 07:12
  • 1
    Sorry I was tired. I edited my answer, should be 0 not -1, http://jsfiddle.net/VXsGw/3/ – Ryan B Feb 08 '13 at 11:38
0

see this website for list of event that support on browsers http://www.quirksmode.org/dom/events/index.html

mohammad mohsenipur
  • 3,218
  • 2
  • 17
  • 22