In my mind, scroll bars in the background distract the user on the overall objective and on the main purpose of the light box. In the same light, most users hate popups and almost feel tempted to leave the website on the spot. Scroll bars in the background may tell users:

Yes, we made a mistake with this popup. However, we still have more content to offer. Scroll to find it...

Twitter disables scroll with you click "Log In." Team House allows you to scroll in the background and even scroll past the popup. Swagbucks allows you to scroll in the background, but keeps the popup centered in the middle (fixed positioning).

What is the most user friendly approach?

  • My opinion is that scrolling the background feels like a mistake. A lightbox is employed when we want to take over the screen, and allow the user to focus on a certain task/object before returning to the main flow.
    – Nate Green
    Commented Apr 15, 2016 at 17:08
  • Make sure, too, that you're not conflating the lightbox UI pattern with the popup anti-pattern. Popups aren't hated by people because of the way they look or behave; they're hated because they rudely interrupt.
    – Nate Green
    Commented Apr 15, 2016 at 17:10
  • One more thing: test your assumptions. You assume that people are "looking for content" on your site/app, and therefore scrolling will intrigue them or titillate them—why not run a tiny usability study to test that assumption? My hypothesis is that people won't be thinking so kindly of your design motivation, but the nice thing about user testing is that it's relatively quick and easy to find out for yourself. :)
    – Nate Green
    Commented Apr 15, 2016 at 17:13

3 Answers 3


it doesn't matter at all

FWIW, you could have scrollbars a cookie monster or a black hole and it will be the same. The whole idea of a popup is to interrupt the user flow for some reason. Structurally speaking once you launch a popup, it's at another dimensional plane of interaction, so you should be only be able to interact with the popup since it's at a higher Z-axis. I did a fast mock to illustrate this:

enter image description here

As you may see, the popup exists in its own dimension, hence whatever interaction element is below it is useless and doesn't matter.


While interact-able elements are useless, it's always good to keep context, so modal or popup windows should be draggable and the transparency layer color and opacity should be one that enables content below to be seen and/or read (not interact!). You can see some best practices for modal windows for further insight on the subject


You need to make this decision based on the expected behaviour of the user. You're right a lot of them hate pop-overs however they convert like crazy for mailing lists, and for pay walls.

If the intention of the pop-over is get the user to do an action then I would say allow the background to scroll and the pop-over with it staying in position as you mentioned SwagBucks does.

If the intention of the pop-over is an ad then scroll but leave the pop-over in place forcing the user back to close it, letting your advertisers know you care about their businesses and your ad will get impressions.

If there is no intention for the pop-over get rid of it.

If the pop-over is being used to collect additional data from the user lay a payment form it should take up the entire page forcing focus, or be replaced with a new page it self.

You have to remember what is the purpose of the pop-over and what do I want the user to do while keeping in mind that the pop-over may be ignored by more technically savvy users, and may confuse the less technically savvy.


One way to think about a lightbox is as a shortcut to present additional content that would have otherwise been on a new page. It's also worth thinking about different types of lightboxes to see if the decision to scroll the background or not scales well. Three things strike me as strong arguments against scrolling the background page.

  • If you think about the lightbox as a subsequent "page," scrolling the previous (background) page while you're on the new page would be a wildly counterintuitive interaction.
  • If the lightbox occupied 100% of the screen (it would be fair to debate whether it's still a lightbox at this point), scrolling the background page would not be apparent while the lightbox is up and the new scroll position could be disorienting for the user once they exited the lightbox. (We had this issue on one of our pages and we considered it a bug.)
  • The lightbox itself may need its content to scroll, so a background page that also scrolled would lead to a potentially confusing interaction depending on the position of the user's cursor (or finger)

I can't really think of a great situation for a lightbox in which you'd want the background page to scroll as a feature. There are situations where you would want to present information in a fixed panel with a separate scrolling panel, but that's a different design pattern entirely in my opinion.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.