Scroll Animation on child div without Scrollbar

Question

I'd like to reproduce an effect similar to this page: https://www.buildinamsterdam.com When you scroll on this website, the child div (with grids) transform accordingly.

There is no scrollbar in this page, it just when you use the mouse to scroll, the grid columns translate with different speed.

Is there a library that can achieve this or anyone with some ideas on how to approach this. I am learning web animations and this is something i am intrigued to solve.

Answer 1

This can be done by hiding the scroll bar while keeping it there. Example from w3schools. CSS might have changed since, but it still works.

.example {
  background-color: red;
  width: 200px;
  overflow-y: scroll;
  float: right;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  color: white;
}

.example.ver2 {
  background: blue;
  right: 200px;
}


/* Hide scrollbar for Chrome, Safari and Opera */

.example::-webkit-scrollbar {
  display: none;
}


/* Hide scrollbar for IE, Edge and Firefox */

.example {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

<p>Try to scroll inside the div below:</p>

<div class="example">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..  Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..   Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..   Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..
  Some text to enable scrolling.. </div>

<div class="example ver2">Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..  Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..   Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..   Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling.. Some text to enable scrolling..
  Some text to enable scrolling.. </div>