Vertical sticky scroll not working on mobile

Design help Layout & Design
1

Hi there,

I have a site I developed. The Mobile effect does not work when on I am actually on mobile.

When I test it on desktop the images change when scrolling. On mobile it just scrolls like a normal page.

I really need to get this out ASAP so any help would be appreciated.

Please could you assist

https://tejals-fresh-site-a4733e1d0fcf42eafdf27.webflow.io/

2

Hey there,

please share your read-only link, so we can help you out.

3

Hi Choreus,

Please see below

https://preview.webflow.com/preview/tejals-fresh-site-a4733e1d0fcf42eafdf27?utm_medium=preview_link&utm_source=dashboard&utm_content=tejals-fresh-site-a4733e1d0fcf42eafdf27&preview=19e49a31bdbbaaf9572baa948d8b66c1&workflow=preview

4

Thanks.

Can you elaborate a bit? Is the effect I’m seeing on the mobile breakpoint inside the Designer the desired effect? It’s not working on an actual mobile device?

Am I understanding this correctly?

5

Yes that is correct. I would like the effect from the designer to be on the mobile browser

6

Webflow automatically adds the following script to the <head>

<script>
  ! function(o, c) {
    var n = c.documentElement,
      t = " w-mod-";
    n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
  }(window, document);
</script>

This adds the following CSS:

<style>
  html.w-mod-touch * {
      background-attachment: scroll !important;
  }
</style>

Changing the above CSS to background-attachment: fixed; makes the desired effect work again.

You might be able to override the behaviour by adding the specific CSS. I’m not totally sure about the effect. There’s probably a good reason for Webflow adding this.

Have a look at the following three threads below.

You might have to do a bit of restructuring in order to make this work without adding custom code. The comment from @cyberdave might be a good starting point going forward.

7

Hi choreus

Thank you for your response.

I have tried the solutions above but without much luck. Do you have a detailed explanation of how I can achieve the same effect on mobile.

Thanks

9

Hi Tejal, so checking the animation that is on the desktop is optimised for the desktop and not for mobile you’ll have to make a completely new variation of this animation optimised for the mobile itself hope this clarifies the issue you’re having and from my experience, you’ll need a bit of hands-on experience with interactions in order for you translate the desktop animation on to mobile.

1 Like