Prevent Body Scrolling on Mobile Navigation Open

[sabanna (Anna)]

Hey, @dankanvis!

.open-button-class-nameand .close-button-class-name or .open-close-button-class should be classnames of your buttons

[dankanvis]

Got it. It worked. Thank you so much for the quick reply!

[OlegN (Oleg)]

Hi, sabanna!

I have tried your advice in order to fix my problem with scrolling body on Mobile version when block with course info is open. But it didn’t work. Maybe I done smth wrong. Can you look at this please?
My published site - https://bluria-5d03f02f3df10a749e-2930ecbd5bffd.webflow.io/
Preview link Webflow - Most updated version

I use “open-button-class-name” class for scroll block (it open info about course) and “close-button-class-name” for Close block (this is a cross that closes the course info)

Also it works wrong in Safari.

[Rodhzz (Rodolpho)]

@sabanna

<script>

// Detecting if it is an iOS device, true/false
  var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform); 

Webflow.push(function() {
  $('.open-button-class-name').click(function(e) {
    e.preventDefault();
    if (iOS) { 
    // for iOS devices:
       var x = $(window).scrollTop().toFixed()
       $('body').css({'overflow': 'hidden',
                         'position': 'fixed',
                         'top' : '-' + x + 'px',
                         'width': '100vw'});
      } else {
        // for all other devices:
        $('body').css('overflow', 'hidden'); 
      }

  });

  $('.close-button-class-name').click(function(e) {
    e.preventDefault();
    if (iOS) {
    //  for iOS devices:
       var t = $('body').css('top').replace('-','').replace('px','')
       $('body').css({'overflow': 'auto',
                         'position': '',
                         'width': '100vw'});
          $('body').animate({scrollTop:t}, 0);
     } else {
        // for all other devices:
        $('body').css('overflow', '');
     }
  });
});
</script>

This code worked almost perfectly here. The only thing weird is that for some reason, it’s not considering my scroll position, so the overlay is shown on a random area of the page.

Read-Only link: Webflow - MouseHover Tests

Does anyone have any idea about what is happening here?

[Paulus_Janes]

Wonderful solution.
it works for me correctly.

[BjornS (Björn Sige)]

Hi @Siton_Systems ! This solution worked perfectly for me… except for one thing. The scroll behavior on iOS is affected a little bit. The up and down status/action bars in safari don’t go away/minimize like they should and I can’t tap on the adress bar to go back to the top of the page.

Any idea why that is?

Super thanks!

Best regards,
Björn

[dylanclarey]

Hey @sabanna! Thank you for all of you’re amazing tips/tricks. Any idea why the scroll position resets to the top of the page? I’m using your code for my tablet/mobile navigation.

Here’s the read-only link:

https://preview.webflow.com/preview/cgf-website?utm_medium=preview_link&utm_source=designer&utm_content=cgf-website&preview=3e0723551fca545fd44bae44ca468e4b&workflow=preview

Thanks again!

[joanne]

Hi @dylanclarey ! Did you figure this out? I’m having the same issue. @sabanna any help would be much appreciated!

[dylanclarey]

No, I never figured it out!