Sapper: Prevent scroll to top for page transitions

Created on 13 Nov 2018 · 7Comments · Source: sveltejs/sapper

I have found that when using page transitions, the page will snap to the top before transitioning out then the new page will transition in. I do want the new page to start at the top however perhaps the code that scrolls the current page to top before transitioning needs to happen a little later.

Here's a codesandbox: https://codesandbox.io/s/qkpy6nxxnj

To replicate the issue, click "Blog" then scroll down a ways then click a link and you'll see it snap to top, then transition out then the new page transition in

routing

Source

matt3224

👍5

Most helpful comment

This can be solved by using custom CSS transitions. This is the transition function I use which takes into account the window's scroll distance:

function fade(node, { delay = 0, duration = 400, offset=window.scrollY }) {
  const o = +getComputedStyle(node).opacity;
  return {
    delay,
    duration,
    offset,
    css: t => `opacity: ${t * o}; margin-top: -${offset}px`
  };
}

rosslh on 13 Nov 2019

👍3

All 7 comments

Hello, I have the same issue. @matt3224 did you find any workaround maybe?

nick-pripakis on 16 May 2019

@nick-pripakis yes kinda, you can do it by delaying the incoming page transition in by the duration of the out transition

The unfortunate part of page transitions in their current state is lack of control. For example i'd like to click a link, have the page smooth scroll to the top, fade out and then fade in the new page. As far as I'm aware we can't stop it jumping to the top first.

Another example where control over this stuff would be handy is sliding a new page in from the right say, where you wouldn't want the existing page to go to the top at all

I'm sure we'll see these added at some point but i don't think enough of us run into it for it to be high priority unfortunately 😔

matt3224 on 16 May 2019

👍2

Thank you, I'm gonna try it out when I have the time. No page transitions for now. Yes, I hope such a functionality would be implemented at some point, because page transitions are basically broken right now in their current state, for me at least. 😕 In Vue for example, there is a scrollBehavior function which can be implemented on each route, and you have do pretty much whatever you want with the scrolling.

nick-pripakis on 4 Jun 2019

This can be solved by using custom CSS transitions. This is the transition function I use which takes into account the window's scroll distance:

function fade(node, { delay = 0, duration = 400, offset=window.scrollY }) {
  const o = +getComputedStyle(node).opacity;
  return {
    delay,
    duration,
    offset,
    css: t => `opacity: ${t * o}; margin-top: -${offset}px`
  };
}

rosslh on 13 Nov 2019

👍3

Thank you @rosslh, this works great.

Still, working with page transitions feels not really straightforward. Another option would probably be to add the undocumented sapper-noscroll #737 attribute to navigation links and scroll to the top between the pages using transition events.