css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end.

instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure.

is there way around this?

edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script>  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/>  <style>     #outer {         overflow:scroll;         height: 50vh;         width: 50vw;     }      #inner {         height: 500vh;         width: 500vw;     } </style>  <div data-role="page">     <div id="outer">         <div id="inner"></div>     </div> </div> 

same example without external files: https://jsfiddle.net/xr0hjjjc/

<style>     #outer {         overflow:scroll;         height: 50vh;         width: 50vw;     }      #inner {         height: 500vh;         width: 500vw;     } </style>  <div data-role="page">     <div id="outer">         <div id="inner"></div>     </div> </div> 

in chrome, if click on div in second example , press arrow keys, should see scroll bars move. if same first one, won't.

you're right, internal <div>s cannot scrolled using keyboard. approach limitation simple:

• create new handler up/down/pageup/pagedown keys
• when keys pressed, element under mouse
• if element contains keyboardscroll class, scroll accordingly

so, mouse position sets element has scrolled.

updated jsfiddle (click focus "run" quadrant before scrolling)

javascript

var currentmousepos = { x: -1, y: -1 };  $(document).on("pageinit", "#page", function(event) {     $(document).mousemove(function(event)     {         currentmousepos.x = event.pagex;         currentmousepos.y = event.pagey;     });      // keyboard handler     $(document).on("keydown", function(e)     {         // element under mouse         var element = document.elementfrompoint(currentmousepos.x, currentmousepos.y);          // search scrollable element in parents         while (!$(element).hasclass("keyboardscroll") && $(element).parents().length !== 0)             element = element.parentelement;          if (!$(element).hasclass("keyboardscroll"))             return; // no scrollable element found          // set scroll "speed"         var delta = 10;          if (e.keycode === 38) //             delta *= -1;         else if (e.keycode === 40) // down             delta *= 1;         else if (e.keycode === 33) // pageup             delta *= -10;         else if (e.keycode === 34) // pagedown             delta *= 10;         else             return;          // scroll element         $(element).scrolltop($(element).scrolltop() + delta);          // stop event propagating jquery mobile handlers         e.preventdefault();         e.stoppropagation();     }); });