[ScrollSmoother with jump links does not work]

You're definitely not wrong there about smooth scrolling a page, some really gut-wrenching implementations out there. Though I'm very impressed in ScrollSmoother maintaining accessibility and experience consistency across devices, which is what led to me trying it out.

[ScrollSmoother with jump links does not work]

Thank you for confirming that. I've got this in place and working for the moment, however it's poor practice to click-jack a link at all, so I may switch to a button.

 

document.querySelectorAll("a[href^='#']").forEach((a) => {
  a.addEventListener("click", (e) => {
    e.preventDefault();
    ScrollSmoother.get().scrollTo(a.hash, true);
    window.history.pushState({}, "", a.hash);
  });
});

window.addEventListener("load", (e) => {
  if (window.location.hash) {
    ScrollSmoother.get().scrollTo(window.location.hash, true);
  }
});

 

[ScrollSmoother with jump links does not work]

Thanks, that does work if I were to change the link to a button and not use the default behavior of a jump link (which adds the hash to the url bar and such). I can go this route as a last resort, but I think I would prefer to have a solution that allows that native behavior of a jump link to work.

[ScrollSmoother with jump links does not work]

Looking for guidance on how to handle jump links on a page within ScrollSmoother. The default behavior of a jump link moves the scrollbar down the page but ScrollSmoother does not update its progress accordingly, allowing you to no longer scroll up from where you jumped to and scrolling too far beyond the end of the page.

See the Pen BaJrQLj by walpolea (@walpolea) on CodePen

[Scrollsmoother with lazysizes/lazyload images]

I think it's less performance problems and more that the refresh stops the existing scroll tween, causing a stuttering effect. Given the nature of lazy-loaded images (which load as you scroll them near the viewport) I'm not sure there is much to be done, perhaps wait until the velocity is closer to 0 like this:

let needsToRefresh = false;

document.addEventListener('lazyloaded', function(e){
  needsToRefresh = true;
  refresh();
});

function refresh() {
  if( needsToRefresh && smoother.getVelocity() < 0.01 ) {
    ScrollTrigger.refresh();    
    needsToRefresh = false;
  } else if( needsToRefresh ) {
    requestAnimationFrame(refresh);
  }
}

Still not the best experience. Definitely the killer feature would be for gsap to somehow not stop the scrolling tween as ScrollTrigger refreshes.

[Scrollsmoother with lazysizes/lazyload images]

Thanks! This works. I wrote this off because I had tried:

const sm = SccrollSmoother.create(...)                                
//... then later
sm.scrollTrigger.refresh()

Which did not work.

[Scrollsmoother with lazysizes/lazyload images]

I ran into the same issue with a tabbed component changing the content height. The only solution I found was to dispatch a resize event which ScrollTrigger refreshes values on pretty gracefully.

window.dispatchEvent(new Event("resize"));

 

This also works as images lazily load in, but there is some undesired jank as things recalculate while the scrolling is mid-tween

document.querySelectorAll("img[loading=lazy]").forEach((i) => {
  i.addEventListener("load", (e) => {
    window.dispatchEvent(new Event("resize"));
  });
});