Scrolling elements when overflow is hidden

Question

I am currently looking for hours on help how all these modern web apps are built. They seem to have overflow hidden and still animate elements on scroll in all directions.

Example pages I liked and use it: http://www.contiducco.it/chi-siamo & https://theshift.tokyo/

I tried to build something like this using:

 componentDidMount() {
    var scrollDepth = 0;
    $(window).bind("mousewheel DOMMouseScroll", function(event) {
      if (
        event.originalEvent.wheelDelta < 0 ||
        event.originalEvent.detail > 0
      ) {
        var onScrollDown = setTimeout(function() {
          scrollDepth = scrollDepth + 1;
          this.onScrollDown;
        }, 10);
      } else {
        var onScrollUp = setTimeout(function() {
          scrollDepth = scrollDepth - 1;
          this.onScrollUp;
          console.log(scrollDepth);
        }, 10);
      }
    });

But I guess calculating scrollDepth multiple times per second is pretty bad for the framerates.

Is there a library or simpler/ more efficient way to be able to move elements by scrolling without having the scrollbar?

Thank you for your help

You could hide the scrollbar. https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll — Takit Isy, Apr 24 '18 at 14:58

Dalila Hannouche · Answer 1 · 2018-04-24T16:05:54.113

0

you must create horizontal scrolling of the containers , you can see this in the tutorial :

<a href="https://codepen.io/colinlord/post/horizontal-scrolling-containers">Copy paste the link in a </a>

create horizontal scrolling of the containers

edited Apr 24 '18 at 16:05

answered Apr 24 '18 at 15:09

Dalila Hannouche

29
11

Scrolling elements when overflow is hidden

1 Answers1