Jump to content
Search Community

pinReparent issue on window resize

RobbieC test
Moderator Tag

Recommended Posts

First I want to apologize for the amount of code that's in my CodePen, I had to scrap it from my project and make sure I could recreate the issue.

 

In my project I'm using Smooth Scrollbar & Barba.js but I didn't include the Barba code because I was able to recreate the issue without it (plus can you even use barba.js page transitions in codepen?)

 

Anyway the issue I'm having is when you scroll to the end of the page (or to the end of the 2nd pinned section), then resize the window and scroll back up the "portfolio" section is missing. If you inspect element you can see that the "portfolio" section seems like it is still stuck in the pinReparent; which is below all the script tags BUT it doesn't make sense because if you inspect element and watch the two pinReparent's happen; once you get to the end of both sections, the sections leave the pinReparent state but once you resize the window the portfolio section jumps back into the pinReparent state.  

 

This issue only happens on a window resize event, so I'm not sure if it's an issue with pinReparent, Smooth Scrollbar or my code.

 

Before I added Smooth Scrollbar to my project I only had the portfolio section and the only way I could get that section to scroll correctly with Smooth Scrollbar was to add the pinReparent. The same goes for when I added the zoom section into the project, it wouldn't work without it.

 

I have tried to add a couple different eventlisteners but that didn't help. Here is the most recent one I tried on my project:

  let allTriggers = ScrollTrigger.getAll();
  ScrollTrigger.addEventListener("refresh", () => bodyScrollBar.update());
  ScrollTrigger.refresh();

  let progress = 0;
  ScrollTrigger.addEventListener("refreshInit", () => progress = allTriggers.progress );
  ScrollTrigger.addEventListener("refresh", () => allTriggersscroll(progress * ScrollTrigger.maxScroll(window)));

  bodyScrollBar.addListener(ScrollTrigger.update);

I also tried to wrap it in a window.addEventListener and some different variations but no luck.

 

Another weird thing is the word "TEXT" that's in the portfolio section; jumps up once the pin/horizontal scrolling starts. I'm not sure why it does it in the CodePen but is does not do it in my project.

See the Pen XWNJmvJ by robbiecren07 (@robbiecren07) on CodePen

Link to comment
Share on other sites

 

Hey @RobbieC

 

You are making an essential mistake when it comes to hooking up ScrollTrigger to smooth-scrollbar:

You are initialising smooth-scrollbar on your #viewport - but your ScrollerProxy is directed to the document's body.

 

If you change the ScrollerProxy to your #viewport, you should also define that as the scroller for all your ScrollTriggers.

Fixing the above should make the use of pinReparent needless.

 

Is that better for you?

 

See the Pen 770c46f7044d57cb070f5c71396e48a1 by akapowl (@akapowl) on CodePen

 

  • Like 4
Link to comment
Share on other sites

Thank you @akapowl !!

I initially had my ScrollerProxy set to #viewport BUT I didn't define the scroller for ScrollTrigger, so it wasn't working and when I was searching online I came across an example that had the ScrollerProzy set to document.body and I gave that a try and it seemed to work but as you can see.. it didn't.. 😅

Link to comment
Share on other sites

 

You're welcome.

 

And you could have saved yourself some time, checking the docs for ScrollerProxy instead - they do have an example setup with smooth-scrollbar ;) 

 

In addition to that;

If it ever were neccessary for you to use the body as the scroller for smooth-scrollbar, this thread here contains an example that shows what would be important for that.

 

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...