michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix scroll position when navigating back from page w/o ViewTransitions (#8332)

Browse source 
Co-authored-by: Justin Beaty <51970393+justinbeaty@users.noreply.github.com>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Martin Trapp 2023-09-05 21:05:55 +02:00 committed by GitHub
parent cde0cc4093
commit 8935b3b467
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/weak-kids-roll.md Normal file
View file

@ -0,0 +1,5 @@
---
'astro': patch
---
Fix scroll position when navigating back from page w/o ViewTransitions

9
packages/astro/components/ViewTransitions.astro
View file

@ -30,9 +30,11 @@ const { fallback = 'animate' } = Astro.props as Props;
// The History API does not tell you if navigation is forward or back, so
// you can figure it using an index. On pushState the index is incremented so you
// can use that to determine popstate if going forward or back.
let currentHistoryIndex = history.state?.index || 0;
if (!history.state && transitionEnabledOnThisPage()) {
persistState({ index: currentHistoryIndex, scrollY: 0 });
let currentHistoryIndex = 0;
if (history.state) {
// we reloaded a page with history state (e.g. back button or browser reload)
currentHistoryIndex = history.state.index;
scrollTo({ left: 0, top: history.state.scrollY });
}
const throttle = (cb: (...args: any[]) => any, delay: number) => {
@ -352,6 +354,7 @@ const { fallback = 'animate' } = Astro.props as Props;
// The current page doesn't haven't View Transitions,
// respect that with a full page reload
// -- but only for transition managed by us (ev.state is set)
history.scrollRestoration && (history.scrollRestoration = "manual")
location.reload();
return;
}

2
packages/astro/e2e/fixtures/view-transitions/src/pages/long-page.astro
View file

@ -32,6 +32,8 @@ import Layout from '../components/Layout.astro';
<div><a id="click-one-again" href="/one">go to 1</a></div>
<div><a id="click-scroll-up" href="#longpage">go back up</a></div>
<div><a id="click-external" href="/three">leave ViewTransitions</a></div>
Morbi tristique senectus et netus et. Neque aliquam vestibulum morbi blandit cursus risus. Pharetra pharetra massa massa ultricies mi quis. Sit amet aliquam id diam maecenas ultricies mi eget mauris. Ultrices mi tempus imperdiet nulla malesuada. At consectetur lorem donec massa sapien faucibus et molestie. Non sodales neque sodales ut etiam. Eget nunc lobortis mattis aliquam faucibus purus in massa tempor. Viverra suspendisse potenti nullam ac tortor vitae purus faucibus. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum. Diam vulputate ut pharetra sit. Felis donec et odio pellentesque diam. Mollis aliquam ut porttitor leo. Vitae nunc sed velit dignissim sodales. Facilisis mauris sit amet massa vitae tortor condimentum lacinia quis.
Aliquet enim tortor at auctor urna nunc id cursus. Bibendum at varius vel pharetra vel turpis nunc eget. Mattis molestie a iaculis at erat. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae nunc sed. Nunc congue nisi vitae suscipit. Donec massa sapien faucibus et molestie ac. Nec feugiat nisl pretium fusce. At imperdiet dui accumsan sit amet nulla facilisi. Sed viverra tellus in hac.

21
packages/astro/e2e/view-transitions.test.js
View file

@ -502,3 +502,24 @@ test.describe('View Transitions', () => {
await downloadPromise;
});
});
test('Scroll position is restored on back navigation from page w/o ViewTransitions', async ({
page,
astro,
}) => {
// Go to middle of long page
await page.goto(astro.resolveUrl('/long-page#click-external'));
let locator = page.locator('#click-external');
await expect(locator).toBeInViewport();
// Go to a page that has not enabled ViewTransistions
await page.click('#click-external');
locator = page.locator('#three');
await expect(locator).toHaveText('Page 3');
// Scroll back to long page
await page.goBack();
locator = page.locator('#click-external');
await expect(locator).toBeInViewport();
});