spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
35 lines (34 loc) • 1.84 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Nested Spatial Navigation Container">
<meta name="author" content="Jihye Hong">
<meta name="description" content="The <b>spatial navigation container</b> are established by the viewport of a browsing context and scroll containers.
Also, those types of spatial navigation container are focusable by default.
Even if there isn't any focusable element inside the scroll container, it will gain the focus.">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<div style="width:600px; height: 400px; padding: 20px;">
<h4>
<span>Document</span> >
<span class="c1">Scroll container</span> >
<span class="c2">Scroll container</span> >
<span class="c3">Scroll container</span>
</h4>
<button class="box b1" style="top:150px; left:20px; width:50px; height:50px;"></button>
<div class="container c1" tabindex="0" style="position: relative; left:110px; width:750px; height:320px; overflow-x: scroll;">
<div class="container c2" tabindex="0" style="position: relative; left:50px; width:400px; height:220px; overflow-x: scroll;">
<div class="container c3" tabindex="0" style="position: relative; left:50px; width:200px; height:100px; overflow-x: scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div>
</div>
<button class="box b2" style="top:-145px; left:600px; width:50px; height:50px;"></button>
</div>
</div>
</body>
</html>