Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nested scrollers for touchscreen swipe navigation</title>
<script src="/tests/SimpleTest/paint_listener.js"></script>
<script src="/browser/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script>
<style>
html {
overflow-x: scroll;
overflow-y: hidden;
}
body {
margin: 0;
}
#root-content {
width: calc(100vw + 400px);
height: 500px;
padding-top: 20px;
background: lightgray;
}
#outer {
margin-left: 20px;
width: 420px;
height: 260px;
overflow: scroll;
}
#outer-content {
width: 1000px;
height: 240px;
padding-top: 20px;
background: lightblue;
}
#inner {
margin-left: 20px;
width: 340px;
height: 200px;
overflow: scroll;
}
#inner-content {
width: 1000px;
height: 180px;
background: lightgreen;
}
.contain-x { overscroll-behavior-x: contain; }
.chain-x { overscroll-behavior-x: chain; }
.none-x { overscroll-behavior-x: none; }
</style>
</head>
<body>
<div id="root-content">
<div id="outer">
<div id="outer-content">
<div id="inner"><div id="inner-content"></div></div>
</div>
</div>
</div>
</body>
</html>