Skip to content

Instantly share code, notes, and snippets.

@sebble

sebble/scroll-test.html

Created July 28, 2016 17:41
Show Gist options
  • Save sebble/b2fb5def150624b309f34ef9be5dd820 to your computer and use it in GitHub Desktop.
Save sebble/b2fb5def150624b309f34ef9be5dd820 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
scroll-test.html
<!doctype html>
<meta charset=utf-8>
<title>Scroll test</title>
<style>
html, body {
width: 100%;
height: 100%;
background-color: #eee;
box-sizing: border-box;
padding: 0;
margin: 0;
overflow: auto;
}
body > div {
width: 320px;
height: 480px;
box-shadow: inset 0 0 3px 3px #ccc;
margin: 5rem auto;
position: relative;
overflow: hidden;
background-color: #fff;
}
div > div {
position: absolute;
top: 20rem;
box-shadow: 0 0 10px 3px #ccc;
width: 100%;
bottom: 0;
overflow-y: hidden;
}
div > div:hover {
overflow-y: auto;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
li {
padding: .5rem 2rem;
border-bottom: solid 1px #eee;
}
li:first-child {
padding-top: 1rem;
}
li:last-child {
padding-bottom: 1rem;
border-bottom: none;
}
</style>
<div>
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</li>
<li>nine</li>
</ul>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment