No Scroll Two

This demo shows how you can effectively suppress scrolling when navigating to the next page.

It works by memorizing the scroll position in the astro:after-preparation handler and setting it in the astro:after-swap handler.

See below for the actual code.

Every page has this section near the top

This is page two

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

And each page has this other section

This is page two

To achieve this effect, you can put the <NoScroll /> component in the <head> of your page.

If you are interested in details, here is a sketch of how that component works:

We save the actual scroll position in the listener for the after:preparation event, i.e. rightbefore the swap. And we restore the scroll position right after the swap, in the after:swap listener.

1
  let position = { left: 0, top: 0 };
2

3
  document.addEventListener('astro:after-preparation', () => {
4
    position = { left: scrollX, top: scrollY };
5
  });
6
  document.addEventListener('astro:after-swap', () => {
7
    scrollTo({ ...position, behavior: 'instant' });
8
  });

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec aliam tincidunt, velit magna accumsan nunc, nec ultrices elit nunc vitae justo. Sed euismod, nisl nec aliquam tincidunt, velit magna accumsan nunc, nec ultrices elit nunc vitae justo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl nec aliquam tincidunt, velit magna accumsan nunc, nec ultrices elit nunc vitae justo. Sed euismod, nisl nec aliquam tincidunt, velit magna accumsan nunc, nec ultrices elit nunc vitae justo.

A floating link to the next page