scrollTo and remove() element.

[jrh]

Hey all,

So I'm trying to figure out why this approach won't work in Safari.

 

The CodePen link includes a really trimmed down version of a larger piece of functionality I'm building where content is fetched dynamically, placed in an element and scrolled to. After that, the previous content above is removed from the DOM. All this takes place in an 'overlay' element that is fixed in place and has overflow auto applied.

 

This seems to work fine in all browsers, except for Safari. Where after the scroll animation and original content being removed, the scroll position goes all wonky.

 

Just wondering if this is a known issue, if there are any fixes or if there might be a better approach altogether?

 

Cheers.

J

See the Pen qBMGXVV by j-rh (@j-rh) on CodePen

[elegantseagulls]

I think that's just browser behavior for when you remove content in Safari... I'd suggest also manually setting your scroll position immediate after you remove the content.

[GreenSock]

Yep, you're shifting the whole layout around, so the browser has to figure out where to place the new scroll position and my guess is different browsers handle that differently. Perhaps just do something like: 

 onComplete: () => {
   let bounds = newContent.getBoundingClientRect();
   currentContent.remove();
   fetchContainer.scrollTop += newContent.getBoundingClientRect().top - bounds.top;
 }

 

[jrh]

Amazing! Thank you @GreenSock, that seems to work well..