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

Need help Responsiveness
3

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.

image
image1630×170 9.75 KB

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