Forum Academy Marketplace Showcase Pricing Features

Tutorial: Scroll within a popup without scrolling the page

How to make a popup scroll-able without scrolling the underlying page :scroll:

Links: Demo and Editor.

Bear in mind this is a relatively “bare bones” version. There may be some nuances depending on how your page is laid out but this should get you most of the way conceptually!

So there are two aspects:

  1. Make the popup scroll its internal content (simples)
  2. Stop the main page behind it from scrolling (bit trickier)

:one: Part One: Scrolling the popup

  1. Add your popup, and give it a unique ID
    image

  2. Add an HTML element to the page and insert the following inside of “style” tags:

#myPopup{
   top:0px !important;
  	max-height: 100vh !important;
  	overflow-y:scroll !important;
}

image

Note, the height of the popup should not exceed the page height. Bubble is a bit funny about this and the scroll will not work if the end of the popup is past the “fold” i.e. past the initial view on page load. Setting top to 0 sticks the popup to the top, and making the max-height “100vh” ensures it does not expand beyond the bottom of the screen.

If you want the popup to be more in the middle of the screen change “max-height” to 90vh, and “top” to 5vh (as is the case in the demo)

That’s the basics of it! Test it out. It should scroll internally as long as the content is taller than the popups height.

:two: Part Deux: Making the underlying page not scroll

So the basic idea is to hold the background fixed while the popup is open so that is cannot scroll. There’s a few ways to do it and I’ve burnt a lot of midnight oil in the past to find a solution that works for the way Bubble renders pages. Here it is.

Firstly, you will need the “Toolbox” plugin which contains a “Run Javascript” action. It’s a free plugin created by @mishav

  1. Add an ID to your page
    image

  2. When the popup is opened: Inject some JS when the popup is opened. Crucial here is that the script runs before the popup is actually opened in the workflow. See below for workflow and JS.

savedScrollY = window.scrollY;
let x = document.getElementById("myPage"); 
x.style.position = "fixed"; 
x.style.top = -savedScrollY+"px";
  1. When the popup is closed: Run another JS script as follows.
    image
let x = document.getElementById("myPage");
x.style.position = "absolute";
x.style.top = "";
window.scrollBy(0, savedScrollY);
document.getElementById("myPopup").scrollTo(0,0);

Et voila! You should have a popup that scrolls internally without the page behind it moving.

Live long and prosper, friends. :vulcan_salute:

Rob.

PS. Scrollbars: Default scrollbars are hideous. They will naturally appear when you’re forcing an element to scroll like this. I use a great little plugin called Sweet Scrollbar from @Yinka . Follow the setup in the demo to hide your scrollbars. If you must have scrollbars, this plugin will at least make them look prettier.

PPS: Mobile: There can be some quirks when displaying on mobile due to the extra height added by the mobile browser’s navigation bar. This can be worked around however.

12 Likes

Brilliant, thanks mate!

1 Like

@robhblake

This is brilliant, thanks for sharing this!

I used this variation of your technique for my use case that doesn’t style the popup. This also works when the popup is inside a reusable. I’ve tested in Chrome, Mozilla, Safari, on desktop & mobile, and a wrapped app on ios. :+1:

I thought I’d share it here for anyone looking for something similar. Thanks again for sharing, I wouldn’t have been able to implement this version without yours. :vulcan_salute:

2 Likes

Thans @andy.i - missed that! Added in now.

Rob.

1 Like

Hey @robhblake, Thank you for sharing this. I was stuck with this problem and found your post with the perfect solution.

1 Like