![]() ![]() For example, overflow: scroll hidden would set overflow-x to scroll and overflow. ![]() Otherwise, both overflow-x and overflow-y are set to the same value. If two keywords are specified, the first applies to overflow-x and the second applies to overflow-y. But until this point, I got along pretty well using this approach on a couple of sites. Note: You can specify x- and y-axis scrolling using the overflow property, passing two values. 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. 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. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |