Scrolling Issue on Mobile

Ask the community
,
1

Hi. I am experiencing a weird bug on the mobile version of my Wix site. For some reason the issue only occurs on my home page. Upon loading the page, it does not have me scrolled to the top of the page. It instead has me scrolled down a little bit. Every time I refresh, it scrolls down an additional amount (the same distance every time). I was able to use code to have the site scroll to the top of the page every time, but the problem with that is it prevents anchors from working. It will just scroll up every time. To get around this, I’d like to have it scroll up relative to the current scroll position upon loading.

In other words, my page is loading x number of pixels down the page, so I want to gave it scroll up x number of pixels to counter it. I’m having trouble getting the current scroll position. I’ve tried several things, but this is where I’m at now:

import wixWindow from 'wix-window';

$w.onReady(async () => {
    let x, y;
    await
    wixWindow.getBoundingRect().then((
        result) => {
            const window = result.window;
            x = window.width;
            y = window.height - 100;
        }
    );
    if(wixWindow.formFactor === "Mobile"){ 
        wixWindow.scrollTo(x, y, {"scrollAnimation": false})
    }
});

I have also tried this with no luck:

import wixWindow from 'wix-window';

let scrollX = 0;
let scrollY = 0;

wixWindow.getBoundingRect()
  .then((windowSizeInfo) => {
    scrollX = windowSizeInfo.scroll.x;
    scrollY = windowSizeInfo.scroll.y - 100;
});

$w.onReady(function () => {
  wixWindow.getBoundingRect();
  if(wixWindow.formFactor === "Mobile"){ 
        wixWindow.scrollTo(scrollX, scrollY, {"scrollAnimation": false})
}
});

Any help would be much appreciated.

2

This has been driving me nuts, zero understanding of why it happens.

Sorry, I can’t lend any help other than saying that I used your first code snippet but found increasing the window.height - value (I used 800) pushed the first load view up the page.

3

Am I crazy or is the issue that you are trying to solve for is not expected behavior in the first place?

Have you tried some more basic troubleshooting (I.E. Clearing cookies on mobile browser or using s different mobile browser?)

If so there likely is something in your page code that is causing it to scroll down on load in the first place.

4

Correct yeah, 100% trying to fix something that should not have to be fixed…

Tried on multiple browsers, phones, tried in on my MBP with Safari in responsive mode to emulate an iPhone; all the same.
I’ve stripped all elements from the page, added two strip sections, same issue.

I could for sure delve into the actual source of the page but tbh I can’t be bothered and this isn’t a full time job for me. This fix works and I’m not going to go about fixing something that shouldn’t be broken.

5

Yeah, just as Matteo said, it happens on all phones and browsers. I’ve found that wix sadly has a lot of annoying, unexpected issues like this one.

6

I’m glad I’m not the only person trying to fix this. But wait, so the code worked for you? It doesn’t change my scroll position no matter what value I put for the window height. My console says x and y are undefined no matter what I do. Basically the same for the other code. scrollX and scrollY always remain as zero no matter what I do.

7

@aidankale Wow yeah 100% works for me on my mobile site, let me know if I can at all help with readouts or code. I can’t share my website though as it’s not official just yet for the company i made it for.

8

@matteoveglia Hi, sorry I took a while to respond.

So just to be clear, the code does take me to the top of the page which is great, but the problem occurs if I take the following steps:

  1. scroll down

  2. then click a link to a different page within my site

  3. then hit the back button
    In that scenario, it shouldn’t take me to the top of the page. It should remember my scroll position and adjust for the unnecessary down-scrolling. But it just takes me back to the top every time as if the variables I set are always just 0,0.

You can actually just achieve this with a much shorter script:

import wixWindow from 'wix-window';

$w.onReady(async () => {
    if(wixWindow.formFactor === "Mobile"){ 
        wixWindow.scrollTo(0, 0, {"scrollAnimation": false})
    }
});

Anyway, this isn’t actually a big deal for my site in particular. I’m just a perfectionist, and I also wanted to ensure that I’d be able to use anchors down the road if I wanted. I’m just gonna count my losses and stick with this shorter code, but if you manage to figure it out, please do let me know! And thanks for offering to help.