spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
34 lines (33 loc) • 1.8 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.">
<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:100px; left:20px; width:50px; height:50px;"></button>
<div class="container c1" tabindex="0" style="position: relative; left:110px; width:600px; height:400px; overflow-x: scroll;">
<div class="container c2" tabindex="0" style="position: relative; left:50px; width:500px; height:300px; overflow-x: scroll;">
<div class="container c3" tabindex="0" style="position: relative; left:50px; width:200px; height:150px; overflow-x: scroll;">
<button class="box b3" style="top:40px; left:60px; width:50px; height:50px; background-color: #00b176b0"></button>
</div>
<button class="box b3" style="top:-100px; left:400px; width:50px; height:50px;"></button>
</div>
</div>
</div>
</body>
</html>