0

I have a customer who requested me to modify the scrolling behavior of his webpage. All discussions aside, he wants it to be on mobile and desktop to be identical and to create an "app like" swiping from entry to entry.

Basically there's a container and if you scroll the container in one direction it should automatically scroll to the next item. I am currently hooking the scroll event and scrolling to the next element but this gets triggered for every scroll (which happens too often).

Example: https://stackblitz.com/edit/angular-1bqmxg

Basically I wanna do what they are doing: https://alvarotrigo.com/fullPage/

youngStupidQuestionGod
  • 115
  • 2
  • 13
  • 1
    https://stackoverflow.com/questions/25839487/auto-scroll-to-next-anchor-at-mouse-wheel This may help you out. – Jacopo Sciampi Jan 30 '20 at 15:46
  • 1
    I think you could use HammerJS angular library. Please refer this tutorial https://scotch.io/tutorials/using-hammerjs-touch-gesture-in-angular-2 – Obaid Jan 30 '20 at 15:47
  • I think I need to combine these two @JacopoSciampi Obaid -- So I can have a function which makes the jump and is being triggered by either a scroll event or a gesture from HammerJS! Thanks for your input! – youngStupidQuestionGod Jan 30 '20 at 17:51

1 Answers1

1

Try this out, modified your stackblitz

https://stackblitz.com/edit/angular-throttle-scrolling

prabhatojha
  • 1,925
  • 17
  • 30
  • WOW! MAN! I just finished this one https://stackblitz.com/edit/angular-1bqmxg and was not satisfied with it all. Yours is great. I just noticed that it sometimes double scrolls, I guess its related due to the throttleTime? I will investigate! Thanks a ton – youngStupidQuestionGod Jan 30 '20 at 18:42
  • 1
    Yup, it's related to throttleTime, if we increase it and make the scroll bit more slowly than what it is now. It will become perfect. – prabhatojha Jan 30 '20 at 18:45
  • 1
    For info, I made the ".detail" class "overflow: hidden;" – prabhatojha Jan 30 '20 at 18:49
  • Thanks, I really like your solution! – youngStupidQuestionGod Jan 30 '20 at 18:54
  • Can I somehow check if the container is being scrolled? Right now it gets triggered every time you scroll anywhere on the page. I tried to use `this.container` instead of `document` but that doesn't seem to work. I thought I could pipe the event from *any* element? – youngStupidQuestionGod Jan 30 '20 at 19:42
  • 1
    Updated the project, you need this.container.nativeElement and call it in ngAfterViewInit – prabhatojha Jan 31 '20 at 03:13