spatial-navigation-polyfill
Version:
A polyfill for the spatial navigation
74 lines (60 loc) • 4.68 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Various Overflow Regions">
<meta name="author" content="Yeonjae Koo">
<meta name="description" content="You can check the default spatial navigation behavior <b>in various overflow conditions.</a">
<link rel="stylesheet" href="spatnav-style.css">
<script src="spatnav-utils.js"></script>
<script src="../../polyfill/spatial-navigation-polyfill.js"></script>
</head>
<body>
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll
<button class="box" style="top: 70px; left: 200px;"></button>
<button class="box" style="top: 550px; left: 200px;"></button>
</div>
<div class="container" tabindex="0" style="height: 160px; width: 600px; overflow-y: visible;">
overflow-y: visible
<button class="box" style="top: 30px; left: 200px;"></button>
<button class="box" style="top: 160px; left: 200px;"></button>
</div>
<div class="container" tabindex="0" style="height: 180px; width: 600px; overflow-y: hidden;">
overflow-y: hidden
<button class="box" style="top: 70px; left: 200px;"></button>
<button class="box" style="top: 180px; left: 200px;"></button>
</div>
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll, offscreen test
<button class="box" style="top: 10px; left: 200px;"></button>
<div class="container c1" style="width:300px; height:1500px;">
</div>
<span style="color: red;">Can't scroll up back when container DIV tabIndex is less than 0</span>
<br>
</div>
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll<br>
<div class="box " style="margin:15px; width: 250px; height: 150px; display: inline-flex;">
overflow: unset
<button class="box" style="top: 70px; left: 50px;"></button>
<button class="box" style="top: 180px; left: 50px;"></button>
</div>
</div>
<div class="container" tabindex="0" style="height: 200px; width: 600px; overflow-y: scroll;">
overflow-y: scroll<br>
<p class="box polyfillContainer" style="margin:15px; width: 250px; height: 150px; display: inline-flex;">
<p> tag container<br> overflow: unset
<button class="box b1" style="top: 70px; left: 50px;"></button>
<button class="box b1" style="top: 180px; left: 50px;"></button>
</p>
<button class="box" style="position: absolute; top: 1350px; left: 180px;"></button>
</div>
<p tabIndex=1 style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;">This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br>This is a paragraph tabIndex=1.<br></p>
<p style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;"><span style="color: red;">Can't scroll when scrollable area is tabIndex<0</span><br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br>This is a paragraph no tabIndex.<br></p>
<br>
<div tabIndex=1 style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;"><span style="color: red;">Can't scroll up</span><br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br>This is a DIV tabIndex=1 without delegation.<br></div>
<div style="width:300px; height:100px; overflow-y:scroll; display: inline-flex;"><span style="color: red;">Can't scroll when scrollable area is tabIndex<0 </span><br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br>This is a DIV no tabIndex, no delegation.<br></div>
</body>
</html>