How to make a popup scroll-able without scrolling the underlying page 
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:
- Make the popup scroll its internal content (simples)
- Stop the main page behind it from scrolling (bit trickier)
Part One: Scrolling the popup
-
Add your popup, and give it a unique ID
-
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;
}
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.
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
-
Add an ID to your page
-
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";
- When the popup is closed: Run another JS script as follows.
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. 
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.
