The overflow property has the following values: visible - Default. If you apply custom styles for overflow, position, top, or width, your styles might break when the scroll lock is enabled.įurthermore, there might be some edge cases I didn’t think of, and the developers of body-scroll-lock have. The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area. But if you need to lock and unlock scrolling very frequently (every couple seconds), this might hurt the frame rate of your application.īut the most critical caveat you have to keep in mind is that this approach changes certain styles on the element. I don’t think this is a big deal in most cases. If you change the size of the browser window while the scroll lock is active, for example, the scroll position does not get restored correctly.Īnother thing we have to consider is that setting CSS styles on the body triggers painting in the browser. Overflow content is clipped at the elements overflow clip edge that is defined using the overflow-clip-margin property. Overflow content is clipped if necessary to fit vertically in the elements padding box. There are certainly some downsides to this approach. The element box is not a scroll container. querySelector ( 'body' ) let scrollPosition = 0 export default Īs you can see above, we use position: fixed in combination with storing the scroll position of the user so we can restore the scroll position after the fact.

Overflow hidden scroll