Scroll to section for horizontal scroll

[lucaras]

Hello. On my website I have a similar implementation to the codepen attached.

I try to implement a scrollTo function when clicking on the scroll button, but nothing seems to work. The basic scrollTo and scrollIntoView functions don't work if I want them to go to a specific ID.

The only thing that works is scrollTo(number, number). I tried to calculate the height/width of the elements I want to scroll by, but the resulted scroll is always off by a few pixels and I cannot manage to find the right number. 

This only happens with this implementation of Horizontal Scroll. 

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

[akapowl]

 

Hello @lucaras

 

On the ScrollTrigger demos-page there is a demo, that shows how to do get the scrollTo working for a horizontal fake-scroll as such.

 

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

 

Give it a whirl and see if it works for you.

 

Welcome to the forums.

 

 

Edit:

Just to add up on this

 

"I tried to calculate the height/width of the elements I want to scroll by, but the resulted scroll is always off by a few pixels and I cannot manage to find the right number."

 

This might be related to the tween for the horizontal scroll and the ScrollTrigger's duration not having the same value, which is the case in the demo you posted. For scenarios like those you'll have to incorporate an offset into your calculations, as is described in detail in this thread here.

 

 

With the demo you posted that would look something like this

 

    const containerOffset = (panelsSection.offsetTop + targetElem.offsetLeft) * (document.querySelector(".container").offsetWidth / (document.querySelector(".container").offsetWidth - window.innerWidth));

 

See the Pen b9daa75b85b6e77a57bcabde4195a076 by akapowl (@akapowl) on CodePen

 

 

Edit 2:

...and/or make sure that the body has a width of 100vw because if it has a width of 100% the calculations in JS will be thrown of by a few pixels more for every next panel. This seems to work as expected now. Hope I won't have to add an Edit 3