window.scrollY always is 0

[betim]

Check that this is really a bug

• I confirm

Reproduction link

n/a

Bug description

Hi,

No matter what I do, I can't seem to get window.scrollY to work, nor the window.scrollTo works.

For example:

<script>
  import { Page } from "konsta/svelte";

  import Header from "./Header.svelte";
  import Footer from "./Footer.svelte";
  import { onDestroy } from "svelte";

  onDestroy(() => {
    console.log(window.scrollY);
  });
</script>

<Page>
  <Header />
  <slot />
  <Footer />
</Page>

Always logs 0.

Any ideas as to why is this happening?

Expected Behavior

The actual value of where the page is scrolled.

Actual Behavior

0

Konsta UI version

^4.0.1

Platform/Target and Browser Versions

Chromium

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[betim]

To clarify a bit more, I'm using svelte-spa-router which internally uses window.scrollY to store the position of a previous page and when the user presses the back button it scrolls to that position. window.scrollY is 0 in this case.

I tried to google for a solution but could not find any hints as to why this might happen. One guy said that overflow: auto is the culprit, I tried to work around that but again, both browsers' window.scrollY reported 0.

Please advice.

[Krowemoh]

The scroll is on <Page>. I was able to restore the scroll position by using snapshots but it is janky with a setTimeout.

<script>
    let scrollX = 0
    let scrollY = 0

    export const snapshot = {
        capture: () => {
            let y = document.getElementById('myPage').scrollTop;
            return JSON.stringify({scrollPosition: { y }})
        },
        restore: (snapshotJSON) => {
            const snapshot = JSON.parse(snapshotJSON)
            if (snapshot.scrollPosition) {
                scrollY = snapshot.scrollPosition.y
            }
        },
    };

    onMount(() => {
        setTimeout(() => {
            document.getElementById('myPage').scrollTo(scrollX, scrollY)
        }, 500)
    });
</script>

<Page id="myPage"> 
</Page>