# Lock scrolling underneath RG - does anyone know how?

**URL:** <https://forum.bubble.io/t/lock-scrolling-underneath-rg-does-anyone-know-how/288404>\
**Category:** Need help\
**Created:** [October 16, 2023, 11:21am UTC](https://forum.bubble.io/t/lock-scrolling-underneath-rg-does-anyone-know-how/288404 "2023-10-16T11:21:02Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![thethinklab.au](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/thethinklab.au/32/156912_2.png) [@thethinklab.au](https://forum.bubble.io/u/thethinklab.au)\
**Post date:** [October 16, 2023, 11:21am UTC](https://forum.bubble.io/t/lock-scrolling-underneath-rg-does-anyone-know-how/288404/1 "2023-10-16T11:21:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![draked123](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/draked123/32/262422_2.png) [@draked123](https://forum.bubble.io/u/draked123)\
**Post date:** [October 16, 2023, 9:46pm UTC](https://forum.bubble.io/t/lock-scrolling-underneath-rg-does-anyone-know-how/288404/2 "2023-10-16T21:46:35Z")

</div>

You are correct in assuming you’d need some CSS. You’ll also need some JavaScript (I recommend utilizing the [Toolbox](https://bubble.io/plugin/toolbox-1488796042609x768734193128308700) 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](https://us1.discourse-cdn.com/bubble/original/3X/7/6/763991bee518d3e652a245679304d4de93fe842d.png)

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](https://www.w3schools.com/cssref/css3_pr_overflow-y.php).

* * *

## 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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [December 25, 2023, 11:21am UTC](https://forum.bubble.io/t/lock-scrolling-underneath-rg-does-anyone-know-how/288404/3 "2023-12-25T11:21:40Z")

</div>

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