Source code

Revision control

Copy as Markdown

Other Tools

Test Info:

<!DOCTYPE HTML>↩
<html>↩
<style>↩
#scrollbox {↩
margin: 20px;↩
width: 300px;↩
height: 400px;↩
overflow-y: auto;↩
background: linear-gradient(#444, #555);↩
}↩
.opacityBox {↩
opacity: 0.999;↩
border: 1px solid black;↩
margin: 20px;↩
padding: 20px;↩
}↩
#inner {↩
background-image: linear-gradient(white, rgba(255,255,255,0));↩
}↩
</style>↩
<div id="scrollbox" class="scrollTop">↩
<div id="inner">↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
<div class="opacityBox">in opacity box</div>↩
outside↩
</div>↩
</div>↩
<script src="scrolling.js"></script>↩
</body>↩
</html>↩