<header>
<h1>Scroll shadow strengths proportional to the amount of overflowing content</h1>
</header>

<div class="wrapper">
  <div class="shadow shadow--top"></div>
  <div class="shadow shadow--bottom"></div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo libero, facere a qui, quibusdam explicabo molestiae perspiciatis repellendus maxime iusto, quos atque unde inventore quae blanditiis. Corporis aliquid quibusdam, tempora!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo libero, facere a qui, quibusdam explicabo molestiae perspiciatis repellendus maxime iusto, quos atque unde inventore quae blanditiis. Corporis aliquid quibusdam, tempora!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo libero, facere a qui, quibusdam explicabo molestiae perspiciatis repellendus maxime iusto, quos atque unde inventore quae blanditiis. Corporis aliquid quibusdam, tempora!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo libero, facere a qui, quibusdam explicabo molestiae perspiciatis repellendus maxime iusto, quos atque unde inventore quae blanditiis. Corporis aliquid quibusdam, tempora!</p>
  </div>
</div>

<footer>
Inspired by Hakim El Hattab <a href="https://twitter.com/hakimel/status/685057803396988928" target="_blank">tweet</a>
  <p>We can do that using CSS backgrounds but we will lose the opacity transition effect which make it more real.</p>
</footer>

body {
  font-family: 'Arial';
  line-height: 1.5;
}

header {
  width: 70%;
  margin: 50px auto 30px auto;
  text-align: center;
}

footer {
  width: 70%;
  margin: 50px auto 30px auto;
  text-align: center;
}
footer p {
  font-size: 0.75em;
  opacity: 0.65;
}

h1 {
  font-size: 2em;
  padding-left: 1em;
  padding-right: 1em;
}

.wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #D0D0D0;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  border-radius: 4px;
}

.content {
  padding: 10px;
  width: 180px;
  height: 180px;
  overflow-x: scroll;
  white-space:nowrap;
}

.shadow {
  position: absolute;
  top: 0;
  z-index: 100;
  width: 10px;
  height: 100%;
  background: red;
}

.shadow--top {
  left: 0;
  background: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
  opacity: 0;
}

.shadow--bottom {
  right: 0;
  background: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent);
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.35), transparent);
}

var content = document.querySelector('.content'),
    wrapper = document.querySelector('.wrapper'),
    shadowTop = document.querySelector('.shadow--top'),
    shadowBottom = document.querySelector('.shadow--bottom'),
    contentScrollHeight = content.scrollWidth - wrapper.offsetWidth;

content.addEventListener('scroll', function(){
  var currentScroll = this.scrollLeft / (contentScrollHeight);  
  shadowTop.style.opacity = currentScroll;
  shadowBottom.style.opacity = 1 - currentScroll;
});