Looking for way to freeze body scroll w/o losing scroll position

Design help Animations & Interactions
1

Hello Community, this is my first post!

For my portfolio site, I created a pop-up interaction of sorts to give the story behind each piece. This pop-up is almost full-screen, but to keep the visual style I need to have it fixed where it is. The text on these pop-ups scroll perfectly well, but unfortunately, the background scrolls also.

I’ve seen similar posts in the forum (e.g. MOBILE disable 'body' scrolling when popup is enabled ) but their solution would cause me to lose my scroll position. Any other methods to freezing the body scroll?

Thanks for your time!

Here is my public share link:
https://preview.webflow.com/preview/kirkrhodesdesign?utm_source=kirkrhodesdesign&preview=85f7c1257e0b479835673bb34bdaa92d

2

What you face is referred to as “double scroll”.

There are tons of JS solutions to prevent double scroll, some are better than others, some kinda hack the scroll and are horrible.

And there’s a html/css solution here: How to: Prevent Body From Scrolling When Overlay Is On | Have Fun Learning you probably need to revise your structure to make it work. I made this one work in Webflow a handful of times.

1 Like
3

Interesting. I see that her solution produces horizontal scroll due to overflow:scroll on modal though. Did your implementation get rid of that?

1 Like
4

Don’t remember but using overflow-y:scrollinstead should do the trick, right?

5

yes, if that works with that solution of course.

edit: checked her demo, modified in devtools, works!

1 Like
6

OK, tried it more extensively and while this works for simple layouts it interferes with “while scrolling in view” interactions unfortunately. And since I wanted to use it on my own site which uses a LOT of those… well, tough luck :frowning:

7

There’s a couple of good JS for preventing double scroll, and a lot of not so good ones (some are altering the feel of the scroll somehow).

If you find a good, simple, reliable, non hacky one, will you come back here to report? I have the use for it too.

8

Will do. There is this but it didn’t work on my site again disabling scroll on my modal for some reason. Don’t have time to figure this out.