Temporarily stop scrolling/"freeze" the page when Popup is open?

Hey…

Is it possible to disable scrolling when a Popup is opened? Some kind of trick?

Especially on mobile it is kind of annoying when a popup is opneed and the user accidentially scrolls down i.e. because he has to scroll up and find the popup).

Some ideas from the UX Experts?

Thanks for any advice

3 Likes

Hi Pat,

Did you ever figure this out?

I’m looking to do the same thing.

Thanks!
Jen

1 Like

Reviving this old thread, as this was something very important for my UX, so maybe it’s important for others too.

The idea of this is basically to provide the same UX as Twitter on desktop:

Pat%20Walls%20(%40thepatwalls)%20_%20Twitter

Popups seem to have a very specific pre-defined behavior which is hard to control/modify compared to the behavior of other elements. I struggled before to set up mention (tagger plugin) for a multiline input placed in a popup.

For this particular issue of freezing the page when a popup is open, I ended up seeking the help of Benito from @viably.co :pray:.

We thought other bubblers might be interested in the solution he came up with, so here it is:

Demo
Editor

Testing%20Environment

Javascript to run to freeze the page:

// This is every time the popup is visible

  $("#my-popup").wrap( "<div class='innerScroll'></div>" );

  $(".innerScroll").css({'overflow-y':'auto','position':'fixed','top':'0', 'left':'0', 'right':'0','bottom':'0','z-index':'10000'});

  $("body").css('overflow','hidden');

  var esc = $.Event("keydown", { keyCode: 27 });

  $(".innerScroll").click(function(){
    $("body").trigger(esc);
  });

Javascript to run to unfreeze the page:

//   This is every time the popup is not visible

  $("#my-popup").unwrap();

  $("body").css('overflow','auto');

This works well when the popup content isn’t too complex (like in the test page above). However, upon implementing it in my app, we realized the code was run too fast for a more complex content, so the code was overwritten when the popup got fully displayed.

The only fix/hack we could find so far is the same as the one used to set up mention before: add a 1 second pause in the workflow. Benito also split the code into two consecutive steps to make sure everything was executed as it should.

First javascript run:

//   This is everytime the popup is visible
  $("#popup-news").wrap( "<div class='innerScroll'></div>" );

  $(".innerScroll").css({'overflow-y':'auto','position':'fixed','top':'0', 'left':'0', 'right':'0','bottom':'0','z-index':'10000'});

  $("body").addClass( "popup-active" );
 

  var esc = $.Event("keydown", { keyCode: 27 });

  $(document).mouseup(function(e) 
    {
        var container = $(".innerScroll");

        if (!container.is(e.target)) 
        {
        } else {
            $("body").trigger(esc);
        }
    });

Then:

$(".popup-active").css('overflow', 'hidden', 'important');

It’s not perfect, in the sense that if the user starts scrolling immediately the javascript won’t have been run yet, but it’s still better than the original behavior.

Hope this will help others! Feel free to chime in if you have any suggestions on how to improve this solution!

14 Likes

Thank you for sharing this solution @Lucien and @viably.co! :slight_smile:

Thanks

This is awesome Lucien, thanks for this.

By the way, do you have any code that would allow it to work on mozilla firefox or Safari? I am only having success loading the demo on google chrome but not the other two browsers mentioned.

Sorry, I can’t really help with code :sweat_smile:. You would have to ask @viably.co directly.

I have only tested this solution on the latest versions of safari and Firefox, what version are you testing on and maybe I can help debug.

for firefox it is 66.0.3
safari is Version 8.0.8 (10600.8.9)

I had a look at every specific css property or jquery function used (.wrap(), .addClass(), overflow: auto, position: fixed) and the only one that seems both key and doesn’t state backwards compatibility is jquery .wrap() function. I would however suggest that you update you browser as it’s from 2017.

So to do the wrap function with javascript I found this script which should do the job:

org_html = document.getElementById("slidesContainer").innerHTML;
new_html = "<div id='slidesInner'>" + org_html + "</div>";
document.getElementById("slidesContainer").innerHTML = new_html;

hope that helps

Thanks a million…that is awesome. I will see how I get on with it and let you know…I’m not familiar with code but have a basic grip of the idea it is a set of commands.

Cheers

Hi! Thanks for your input here! Very valuable!

I implemented the whole thing. My page is long. And when I have scrolled down and click a popup link two things happen:

  1. The popup doesn’t appear at the windows but I need to scroll down to find it.
  2. I have two scroll bars now.

What is the solution to 1) Making the popup appear straight away, where ever I am on the page, and 2) making the main page scroll bar disappear?

Thanks a lot.
Olli

1 Like

I think this happens when you set the grey out blur

19%20PM

I’m not sure if it works 100% of the time, but I just put a popup together, and during testing see no scroll on the main page. As soon as I saw it, I remembered this post and felt the need to put this out there.

1 Like

Try putting the popup inside a floating group. I’ve had a play around with this and had some success. You can definitely make this work if the page you are designing is not responsive. I’ve had a bit of trouble with this working consistently with responsive.

As soon as your window height is less than the height of your popup/floating group it reverts to the old problem.

There is a plugin which lets you dynamically control the height of an element. It’s possible if you throw this in the mix you may get the desired outcome.

Im stuck with this issue as well, did you find a solution ? please help

This isnt working on mobile device, please reply if you know of a solution, this limitation has ruined my entire project because I have long modals in many places. Please help me solve this.

were you able to figure this out?

@techspot Might this approach be helpful? Part two of the tutorial deals with freezing the page temporarily.

1 Like

Did you ever solve this?