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’ ?
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):
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
Lastly just delete console.log("Enter");and console.log("Exit");. Publish again. Done.
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.
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.
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. Lock Body Scroll (iOS Included) - Webflow
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
#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
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!!
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
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.
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)
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
