Forbid background scrolling

Design help Custom code
1

Hi there!

Long story short - not able to forbid background from scrolling when it is overlay-ed with drop-down menu. I have tried the solution that has been already suggested in the forum (Disable background scrolling when mobile menu is active (opened)) - but it did not work with the error that webflow.push is not recognized as a function… (same when added in project settings and individually on the page). Overflow-hidden and position-fixed also do not take any action as page has been covered completely with .w-nav-overlay - it draws the height usually way more that the page is - I suppose that is why I cannot stop page from scrolling… Its been already few days and no luck, I would really appreciate a help!

This is a link to a project: http://flying-october.webflow.io/

Capture
Capture3197×1509 405 KB

2

Hi @Jekaterina_Aleksejev!
@Waldo did a tutorial to prevent the page from scrolling when a modal is open. It may work for your menu - Tutorial: 99.9% Webflow Created Modal Tutorial/Freebie Clone-able Page

2 Likes
3

Hey @Filipa, thak you so much for a Sunday reply!
I really enjoyed this article that you suggested, and was quite confident that this time it will work… Unfortunately, after cloning tutorial to my webflow editor, I noticed that when I previewed the content the background was still scrolling…:thinking: Looks strange, seems that maybe some javascript files are missing in the page description?

4

:frowning_face:

I did some tests and the following scripts seem to be working (on the published site; not in preview mode):

Webflow.push(function() {
  $('.chapter-2-glossary-link').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'hidden');
  });
  $('.modal-close-button').click(function(e) {
    e.preventDefault();
	$('body').css('overflow', 'auto');
  });
});

var fixed = document.getElementById('fixed');
fixed.addEventListener('touchmove', function(e) {
        e.preventDefault();
}, false);

You can see the result here - http://test-modal.webflow.io/ (click the orange word on the first paragraph)

Here’s the preview link - https://preview.webflow.com/preview/test-modal?preview=da3e6ba053a1eec6be0ae22975ed05b1

I used both scripts (inside script tags). The first script is quite similar to the one on the previous tutorial. The second one (from CSS Tricks) prevents scrolling on mobile devices (at least on iOS… I didn’t test on Android). There’s a problem with the second script though… you won’t be able to scroll on the modal window, even if you set the overflow to auto or scroll. So if you have a lot of content inside the modal, this won’t work very well.

I found another solution that might work for you but I didn’t test it out - Scrollable Overlay

Let me know if any of these work!

2 Likes
5

Custom JavaScript code NEVER works in the Preview. You have to publish to see it in action.

6

Dear @Filipa, thank you so much for your help!:relaxed:

The tutorial was really helpful to understand “how-to”, and after further experimentation appeared that the first code was enough… Interesting thing that after applying it I had a double scroll bar, that worked to hide with this (Preventing body scroll for modals in iOS – Ben Frain)

So far seems to be a working solution, though at some point menu links stopped working, and I am not really sure how well it works on mobile…

Will keep you updated! :smile::v:t3:

7

Tested today again and it works on all browsers (chrome, firefox, microsoft edge) but NOT on Safari… Further investigation showed that apparently Safari is ignoring overflow… Can anyone address this?.. :pensive:
P.S. tried solutions to prevent body scroll on mobile, but Safari ignores that as well…

8

Sorry to hear that @Jekaterina_Aleksejev
It seems to be working on Safari Version 10.1.2, not on mobile though…
Did you try using the second script?

var fixed = document.getElementById('fixed');
fixed.addEventListener('touchmove', function(e) {
        e.preventDefault();
}, false);

It’s supposed to disable all touchmove events and it’s working on safari mobile (link inside modal is also working) - http://test-modal.webflow.io/

1 Like
9

Yessss, it works! Great! :v:t3:

10

I tried these scripts, and it doesn’t seem to work :confused:

11

I’m super late to the party but I finally found back what I was looking for.

There is a way to make this happen without JS.

I successfuly reproduced this solution in Webflow a couple of times.

http://luxiyalu.com/scrolling-on-overlay/

12

Very clever workaround.

For those who didn’t understand how it works:

  • The page content is wrapped in a 100% height, so the body doesn’t actually have a scrollbar

  • The overlay background (separate from the page content) does not have a height, so the child overlay-content element takes the height of the parent (body).

13

But this solution creates permanent scrollbars, both vertical and horizontal with no regards to the actual content, is it not?

14

Is there any chance to implement this solution on hover?:thinking:

16

Thank you for the link @vincent. I could remove a lot of JS snippets on a project today :smiley:

As @samliew pointed out it’s essentially due to the content being wrapped in an extra 100% height container inside the body (that does the trick).

If anyone want’s to see what it looks like inside Webflow, feel free to inspect:

https://preview.webflow.com/preview/thinking-twins?pageId=5caf3ff0d38ef15b74b14e3a&utm_source=thinking-twins&preview=d12008f3a694d82e523d74ac4d2413ea

1 Like
17

Great, thanks for sharing!

18

Marci,

Great solution but how do you get the page to not scroll left and right?!

Check out my site below, you can click any of the first three thumbnails under projects to get pop up modal.

–

Test Site : ZeroSix | Christopher Neil
Read Only : //preview./preview/zerosix?utm_medium=preview_link&utm_source=designer&utm_content=zerosix&preview=098665f20f77196d4b28996d2b54c3ee&mode=preview