spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
37 lines (36 loc) • 1.99 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Spatial Navigation Container">
<meta name="author" content="Jihye Hong">
<meta name="description" content="By default, <b>spatial navigation container</b> are established by the viewport of a browsing context and scroll containers.
Also, an element becomes a spatial navigation container if it is specified with 'spatial-navigation-contain' CSS Property.">
<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">Container with 'spatial-navigation-contain: contain'</span>
</h4>
<button class="box" style="top:100px; left:20px;"></button>
<button class="box" style="top:98px; left:180px;"></button>
<div class="container c1" tabindex="-1" style="position: relative; left:110px; width:500px; height:200px; overflow-x: scroll;">
<button class="box b2" style="top:78px; left:25px;"></button>
<div class="container c2" style="position: relative; left:110px; width:250px; height:100px; --spatial-navigation-contain: contain;">
<button class="box b3" style="top:40px; left:60px;"></button>
<button class="box b3" style="top:30px; left:200px;"></button>
</div>
<button class="box b2" style="top:-80px; left:300px;"></button>
<button class="box b2" style="top:-90px; left:420px;"></button>
</div>
<button class="box" style="top:-119px; left:400px;"></button>
<button class="box" style="top:-120px; left:650px;"></button>
</div>
</body>
</html>