Lock scrolling underneath RG - does anyone know how?

Need help
1

I’m using Floating Groups as popups, instead of traditional popups, for various reasons (mainly being UX, I have greater control over positioning, animations and appearance).

Does anyone know how I can prevent users from being able to scroll screens underneath while the FloatingGroup is showing? Imagine it may need some CSS.

2

You are correct in assuming you’d need some CSS. You’ll also need some JavaScript (I recommend utilizing the Toolbox plugin).

Setting up the CSS

For this, you will need to go to the page in which you want to be frozen. Click on the page itself to get the page properties, as shown:

image
image632×869 36.5 KB

Scroll down until you see “Page HTML Header” and add this code:

<style>
 .no-scroll{
overflow-y: hidden !important;
}
</style>

Now, that will set the Y overflow to hidden. You can read more about that here.

Adding the class

Utilizing Javascript, and the Toolbox plugin, we are going to go to where you trigger your popup to be “visible” and add a new workflow step. This will be called “Run javascript” - and in it, you will post this code:

// Get a reference to the <body> element
var body = document.body;

// Add the "no-scroll" class to the <body> element
body.classList.add("no-scroll");

and then, the opposite to re-enable scrolling:

// Get a reference to the <body> element
var body = document.body;

// Remove the "no-scroll" class from the <body> element
body.classList.remove("no-scroll");

Haven’t actually tested this at all, this is just off the top of my head, so hopefully it works. It makes sense, but I’m sure there is something I’m missing.

1 Like
3

This topic was automatically closed after 70 days. New replies are no longer allowed.