Back to blog

UX: Stop Scrolling

Mike

Bricks Builder is great in many ways, from its intuitive UI, its impressive query loop builder, to its powerful interactions, and many other brilliant features that makes life easier for web designers and developers alike.

Built-in features from the get-go are always a plus for page builders, even when some of them are hidden.

Enter: no-scroll

What is no-scroll?

Bricks Builder has a built-in ‘no-scroll’ JavaScript snippet, mainly for their menu builder and pop-up builder. It is noticeable in the GUI for these native elements as a toggle switch to enable/disable the ‘no-scroll’ feature.

So, what does it do?

The ‘no-scroll’ snippet prevents the page from scrolling. It’s as simple as that. We can utlilize this for other elements, especially when using interactions.

Why should we use it?

We find its good for user experience.

If a user opens a modal, pop-up, or menu, and starts to scroll through these elements, the last thing you want is your body scrolling by accident.

You want your user to be able to close the element, and land back on the same section of your website where they left off at, instead of half way down the rest of the page.

Then, how can we use no-scroll?

It’s quite simple actually. Here is a simple example using a button to open a modal; number 5 is our secret ‘no-scroll’.

Scenario: When the user clicks the button, the modal will open and the user will not be able to scroll.

  1. Create an interaction on the button.
  2. Trigger: Click.
  3. Action: Toggle attribute.
  4. Key: class.
  5. Value: no-scroll.
  6. Target: CSS selector.
  7. CSS Selector: body.

The built-in ‘no-scroll’ feature gets added to the body, so please make sure number 7 is body.

You will also have to set up other interactions to open the modal, and maybe you will have a close button on your modal. This close button will also need to have a similar interaction to remove the no-scroll attribute added to the body, to allow your page to scroll again.

Let’s get into the builder

So, below are the two interactions we added to our button to open the modal and to prevent the page scrolling.

Interaction GUI from Bricks Builder to add an interaction to open a modal.
This interaction adds the class .open to the modal.
Interaction GUI from Bricks Builder to add an interaction to prevent the page scrolling.
This interaction adds the class .no-scroll to the body.

Now, these two interactions below are what we added to our close button on our modal. These interactions close the modal but, more importantly, allow the page to scroll again.

Interaction GUI from Bricks Builder to add an interaction to close a modal.
This interaction removes the class .open from the modal.
Interaction GUI from Bricks Builder to add an interaction to allow the page to scroll.
This interaction removes the class .no-scroll from the body.

Finally, we need a little bit of code to allow our modal to open and close smoothly and have a nice appearing and disappearing effect.

.modal {
transition: all .2s linear;
}
.modal.open {
opacity: 1;
visibility: visible;
}

Just make sure to reverse the modal styles you see above. The modal will need to be set to opacity: 0 and visibility: hidden, we also added fixed positioning.

You can use your own classes etc. but its important to use the built ‘no-scroll’ class and apply it to the body.

We hope you enjoyed this unique article, stay tuned for more 🥸

Share this article:

Speed up your development

Bricks Library is home to 975+ cutting-edge templates to help you build awesome websites in rapid time!

Get started

✨ Brand-new!