Forum Documentation Showcase Pricing Learn more

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

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:

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

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!

10 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