Infinite Scroller List is blocked when body tag is set to fixed

[klipartstudio]

Hi Team,

 

Long time user of greensock since flash days; Great product. 

I need to build a infinite scroller menu which I found tons of examples on the web. I landed on an example that I see your team shares often on here which works well in most cases. My issue is now I am using it for a webAR projects which needs to have the body tag position:fixed; this cause it to not work. I forked the example you share and just added the extra code in the body tag css and it stopped working properly. The button stop working and the drag does not always center. This is due to the scroller using the page scroll which when set body tag on fixed it has no scroll.

 

I was hoping you have ran into this before or can point me in the right direction to fix this issue. I appreciate all you do for us. Thanks

See the Pen bGqXLEY by klipartstudio (@klipartstudio) on CodePen

[akapowl]

Hey @klipartstudio

 

I'm not entirely sure, since I did not actually take a deeper look into how this special example works, but I think that if you need the body to be position: fixed, you will likely have to add a dedicated scroller-container - which you will then also have to address in the ScrollTrigger.

 

The thing is that then the pinType will go from 'fixed' (which is the default for ScrollTriggers on the body as the scroller) to 'transform' - which did cause cause some nasty jumps of the content and UI for me when scrolling fast enough.

 

Setting the pinType to 'fixed' changed that - but then you'd introduce the next problem which would be your gallery obscuring the scroll for the scroller. As a quick fix for that, I included this piece of code by @GreenSock from the thread linked below, at the very end in my codepen.

 

// if you can't just set pointer-events: none (because you need to be able to click on things, for example), you could apply this JavaScript to basically make the mouse wheel events pass through to the scroller:
ScrollTrigger.getAll().forEach(st => {
  const multipliers = [1, 15, 0.03]; // pixel, line, page
  if (st.pin && st.scroller !== window) {
    st.pin.addEventListener("wheel", e => {
			st.scroller.scrollTop += e.deltaY * multipliers[e.deltaMode];
			e.stopPropagation();
			e.preventDefault();
    });
  }
});

 

 

 

I am really not sure if there actually is a way easier way to get it running straight with position: fixed on the body, that I just didn't see - but this appears to be running pretty well. So maybe give it a shot.

 

Hope this is helping - welcome to the forums!

 

See the Pen 03d7b1cb0edbfc36603a7d835a33c936 by akapowl (@akapowl) on CodePen

 

[klipartstudio]

Thanks akapowl,

 

This fixed the original issue with the scrolling but introduced a new issue. The new issue is related to ScrollerTrigger automatically reading the location of the pinned class ".gallery" and adding values to the left and top of this class which has a position: fixed;. This would work if the initial page load placed the pinned element in the right place. On initial load it seems like the vales ScrollerTrigger added to the top:1321.797875px; and left: 195px; is that. Which the left is right but the top is off. I then did a check of the height using window.innerHeight and returned this 659px.

 

To fix this issue I just made a function that reads the height of the browser window and offset it by my carousel height. This is due to my situation I needed it pinned to the bottom of the mobile phone browser. Below I included my method.

 

If you have a better solution I would love to hear it.

 

function resize() {
  let sizeH = window.innerHeight;
  gsap.set('.gallery', {top:sizeH-175})
}

 

 

One other issue seems like the elements on the left and right of the center one sometimes disappears. I assume it is hitting some wrap threshold and popping it out.

[akapowl]

Well if that function on resize works for you, I don't see much to be said against it.

 

I'm afraid I can not tell you much more than that though, because I can not see any of what you mentioned in your last reply happening on the demo I posted above - maybe someoene else can?

 

It could very well be that something else in your project is the cause for those issues.

So if you need any more assistance on this, it would be awesome if you could provide a minimal demo that reproduces the issues you mentioned.