Streaming live at 10am (PST)

MOBILE disable 'body' scrolling when popup is enabled


#1

Hey everyone! I was searching for this before but the only option that seems to be working for me has been presented here

unfortunately it doesn’t work on mobile.
if you follow the link

https://preview.webflow.com/preview/stilnestwhitecms01?utm_source=stilnestwhitecms01&preview=41ecdc3a3d0f12a1352245c4eed7f653

the popup is triggered by clicking elements in “don’t miss” section, mimicking social media stories. On mobile content fits much better when popup is set to overflow and each element has enough space, unfortunately it’s very uncomfortable to use on mobile at the moment.

Could you guys please help disable overflow of body for mobile while the popup is ‘on’ ?

thank you


#2

Hey Artem

I have had this problem as well, although with a full height nav menu like the ones from Apple. I checked their website out and this is some custom code for Webflow, that helped me to freeze the body.

Note that this will freeze the scroll on all devices.

Add this custom code before the </body> tag (already changed to fit your project):

<script>
Webflow.push(function() {

	var clicked = "false";
  
  $('.highlight-link, .exit-popup').click(function(e) {
    e.preventDefault();
    var overflowState = 'auto'

    if (clicked == "false") {
    overflowState = 'hidden';
    clicked = "true";
    console.log("Enter");
    } else {
    overflowState = 'auto';
    clicked = "false";
    console.log("Exit");
    }
    $('html, body').css('overflow', overflowState);
  });
});
</script>

Add height: 100% in your body(All Pages) inside Webflow Designer. Just select body in the navigator, click on the selector in style and choose body(All Pages).

Remember. Scripts only work in published sites. Try publishing and then testing with the developer tools. If you see Enter and Exit in the console. You are good to go :grinning:

Lastly just delete console.log("Enter");and console.log("Exit");. Publish again. Done.

Hope this helps a little

Link to original post:

Link to test site:
http://david-lin-testsite.webflow.io/fixed-popup


#5

to summarise! you’re an absolute saviour and this definitely worked! thank you so much!

Just one little problem left - after i close the popup, page scrolling is different, idk how to explain it, but as soon as i lift my finger up the screen doesn’t continue scrolling, i hope this makes sense.

How could it be fixed?


#6

Perfect to hear!

I remember now that the original code up there, was meant for one button only. You have both a seperate open and close button, so using this code should work more smoother.

Delete old code and paste new code. Dont change height in body.

<script>

Webflow.push(function() {
  $('.highlight-link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

  $('.exit-popup').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

courtesy of @Cjh


#7

thank you! but unfortunately it didn’t fix :frowning:

The body overflow is back when popup is enabled


#8

Whoops my bad.

Try adding html next to both body selectors. so like this:

<script>

Webflow.push(function() {
  $('.highlight-link').click(function(e) {
    e.preventDefault();
	$('html, body').css('overflow', 'hidden');
  });

  $('.exit-popup').click(function(e) {
    e.preventDefault();
	$('html, body').css('overflow', 'auto');
  });
});
</script>

If the weird scroll is still happening. Try checking out @Cjh. He just made a site showing off how to do it without getting that pesky scroll issue. https://webflow.com/website/Lock-Body-Scroll-Including-iOS


#9

thank you again!

this one works the same way as the first solution, right after i close the popup (modal) the scrolling behaviour is changing, and as soon as i stop scrolling with my finger the page stops as well :confused:


#10

Hey again Artem

I tried changing the code received from the Lock Body Scroll Including IOS website to match your website.

Step 1
Give your class popup highlights a:

  1. overflow state of auto
  2. ID of highlight

Step 2
Paste in code inside <head> tag

<style>
#highlight {
-webkit-overflow-scrolling: touch;
}
</style>

#highlight is the ID we just gave popup highlights.

Step 3
Paste in before </body> tag

<script>
// Prevents body scroll on desktop only
Webflow.push(function() {
  $('.highlight-link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });

  $('.exit-popup').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});
</script>

<script>
// Prevents body scroll on mobile only (including iOS) 
(function () {
    var _overlay = document.getElementById('highlight');
    var _clientY = null; // remember Y position on touch start

    _overlay.addEventListener('touchstart', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            _clientY = event.targetTouches[0].clientY;
        }
    }, false);

    _overlay.addEventListener('touchmove', function (event) {
        if (event.targetTouches.length === 1) {
            // detect single touch
            disableRubberBand(event);
        }
    }, false);

    function disableRubberBand(event) {
        var clientY = event.targetTouches[0].clientY - _clientY;

        if (_overlay.scrollTop === 0 && clientY > 0) {
            // element is at the top of its scroll
            event.preventDefault();
        }

        if (isOverlayTotallyScrolled() && clientY < 0) {
            //element is at the top of its scroll
            event.preventDefault();
             }
    }

    function isOverlayTotallyScrolled() {
        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions
        return _overlay.scrollHeight - _overlay.scrollTop <= _overlay.clientHeight;
    }
}())
</script>

Here we are also getting the element by ID highlight, making us able to listen for any touch events happening to it.

Test it to see if it works. If not please don’t hesitate to reply :slight_smile:


#11

thank you soo much!! works almost perfect! :smile:

one notice, for some reason the first button/link/story, call it whatever seems to be not working, as soon as popup opens up it won’t scroll, but the second one works just awesome!!


#12

okay, here’s a more concrete followup, after creating another piece of content, i found out that every first post (on mobile) doesn’t have a scrolling option and just stuck at one point without being able to scroll down, only close.

if you have a moment i would be super grateful if you could take a look

https://preview.webflow.com/preview/stilnestwhitecms01?utm_source=stilnestwhitecms01&preview=41ecdc3a3d0f12a1352245c4eed7f653

but everything else works amazing, thank you soooooo much!!! :blush:


#13

Sorry for the delayed post.

Have you tried giving the class popup box highlight a style of overflow: auto or overflow: scroll
This should tell the browser to make your highlight scrollable.

I am afraid to say that I can’t test it, because I am not able to publish your site, but let me know if this helps any bit. :smile:


#14

Hello again!

I was testing it and trying out all i could but unfortunately the first post (popup window) still isn’t scrollable!
and it’s just the first one, regardless of content or amount of post (popup window)

i’m really lost :frowning:


#15

Hi Artem
I have been going through this problem myself and I can’t find a solution either. Maybe there is another way to implement the popups, so this will work :slight_smile:

Good luck and happy designing