<!DOCTYPE HTML> <html> <style> #scrollbox { margin: 20px; width: 300px; height: 400px; overflow-y: auto; background: -moz-linear-gradient(#444, #555); } .opacityBox { opacity: 0.999; border: 1px solid black; margin: 20px; padding: 20px; } #inner { background-image: -moz-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>