The Hidden Scrollbar Problem: How to Fix It and Improve Your User Experience

Let’s tackle the issue: the prevalent problem of background content shifting to the right when a modal is opened, observed on numerous websites.

The issue stems from the disabling of background content scrolling when the modal is opened, achieved by setting the “overflow:hidden” property on the body element. Consequently, the scrollbar disappears, causing the background content to expand and occupy the additional space. However, the problem arises from the insufficient handling of this extra space resulting from the hidden scrollbar.

Example:

Please check out my pull request (PR) to the React documentation here.

Primarily, this issue is prominent among websites that utilize Algolia DocSearch. Algolia achieves this by appending the class name “DocSearch — active” to the body when the modal is open. Not only Algolia, but many others also adopt a similar approach by adding “overflow:hidden” to handle the scroll suppression.

As a general guideline, when utilizing a popup modal, the underlying content of the body should remain unscrollable.

More examples

In Udemy, the issue occurs when previewing a course.