When a website's height is larger than the viewport, which is almost always the case, a browser will automatically display a y-axis scrollbar on the right side of the screen. While there's nothing wrong with that, there are certain cases when you want to dynamically manipulate the page height which will result in flickering which looks like a bug. The flicker effect occurrs when the previously existing scrollbars suddenly dissapear making the site about 15 pixels wider, depending on the browser.
This is primarily a desktop issue, on mobile phones, scrollbar don't use extra space.
Let's say you're coding a modal box or a menu, and you want to prevent user from scrolling while the menu is displayed. To disable the page body from scrolling you might use position: fixed; which will automatically remove the scrollbars.
The easiest solution, if you don't care much cross-browser compatibility, would be to simply use overflow: overlay;.
/* body or parent element */
.parent {
overflow: overlay;
}
The overlay value of the overflow CSS property is a non-standard value to make scrollbars appear on top of content rather than take up space. This value is, however, deprecated and related functionality being standardized as the scrollbar-gutter property.
Next solution to solve this and avoid the flickering would be to not hide the scrollbars at all by adding overflow-y: scroll; to the body or the parent element.
/* body or parent element */
.parent {
overflow-y: scroll;
}
