I’m working on a div that overflows with a scroll. The expected behavior is when the scroll-able div is focused via clicking on the div or clicking on the scroll bar, keyboard commands will be enabled (i.e. cursor keys, page up page down etc.). Here’s some sample test code:
<html>
<head>
<script type="text/javascript">
function handle() { console.log("fired"); };
</script>
</head>
<body>
<div style="width:200px; height:500px; overflow-y: scroll; border: 1px solid gray;" onscroll="handle()">
<div style="width:150px; height:2000px;"> </div>
</div>
</body>
</html>
This will work on IE, Chrome, Safari. But for Firefox, the keyboard actions are only activated when clicking on the div, NOT the scroll bar itself, so this is the problem.
Apparently making the div tab-able solves the problem! I simply added tabindex=”0″ attribute and in Firefox clicking on the scroll bar will now enable keyboard controlls.