scroll#after

by Grzegorz

HTML

<div id="scroll">
</div>
<div id="wrapper">
  <div id="scrolling">
    <div id="sidebar"></div>
    <div id="content">
      <!-- long content -->
    </div>
  </div>
</div>

CSS

#wrapper {
  padding: 8px;
}
#wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#scroll, #content {
  height: 10000px;
}
#scrolling {
  display: flex;
  will-change: transform;
}
#sidebar {
  width: 200px;
  height: 70px;
  background-color: #9b59b6;
  will-change: transform;
}
#content {
  flex: 1;
  background-color: #ecf0f1;
}

JavaScript

/* let browserScroll = window.scrollY; */
/* window.addEventListener('scroll', () => scroll = window.scrollY); */
(function loop() {
  const scroll = window.scrollY;
	document.querySelector('#scrolling').style.transform = `translateY(-${scroll}px)`;
	document.querySelector('#sidebar').style.transform = `translateY(${scroll}px)`;
  window.requestAnimationFrame(loop);
})();