ScrollTrigger snap to section with normal functional scroll bar (without triggering sections)

[Wizard of Oz]

Hi, this is my very first post and I am very happy to be here

 

I am learning from this codepen and had 2 questions

1. Is there a way to make the scrollbar work normally? On the pen I am learning from, it looks like scrolling down the site with the scrollbar, either by pressing and holding or clicking it results in some unusual activity. I saw the Tesla site also uses snap to sections technique but its possible on their site to use the browser scrollbar as normal. Here is the link to the tesla site: https://www.tesla.com/no_no/solarroof

 

2. How would one go about adding navigation like the attached screenshot? 

TIA

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

It seems to me that the Tesla site is not using the same approach of the codepen. Basically the site checks different events (mouse wheel, keyboard, etc) and scrolls the entire viewport to a specific section of the page. Also if you move scroll down mid-section using the scroll bar and then use an event, it also behaves a bit weird.

 

Honestly, if I was using that approach I'd remove the scroll bar and follow the code used in this samples by @PointC:

See the Pen MzWzyv by PointC (@PointC) on CodePen

See the Pen YRzRyM by PointC (@PointC) on CodePen

 

Happy Tweening!!!

[Wizard of Oz]

Hi Rodrigo, 

 

Thank you, yes, it seems like the pen by Point C is much closer to what I am looking for