sapper icon indicating copy to clipboard operation
sapper copied to clipboard

Router Scroll state against another DOM Overflow element.

Open JohnRSim opened this issue 5 years ago • 1 comments

Is your feature request related to a problem? Please describe. With mobile app development the scroll state may not be defined against the window but against another DOM element that has overflow scroll defined.

Describe the solution you'd like Could we add the ability to define scroll_history state against another DOM ele outside of window.

<main id="scrollable" style="overflow:scroll-y">....content</main>

so I could define either globally define the scroll-able region or within a property against the goto method.

import { goto } from '@sapper/app';

goto('article', { scroll: false, window: '#scrollable' });

Describe alternatives you've considered n/a

How important is this feature to you? Currently I've been using vue and just tied into the router to handle this functionality but trying to do the same with Svelte and came across this issue.

Additional context n/a

JohnRSim avatar Dec 13 '19 18:12 JohnRSim

I would like to second this proposal. In the past several jobs we have had situations where the application layout uses css grid, but the main scrollable content region is not the window or body. Many layouts call for this kind of approach, and it's especially helpful when making responsive changes to update the grid etc.

As mentioned above, whenever there is a route change while the user is not at the top of the scrollable region, the new view loads in the same position.

It seems like a decent solution would be the ability to optionally pass the noscroll behavior to another target.

andrewdc avatar Feb 02 '21 22:02 andrewdc