Scroll Bar Layout Shift
Answered
Great Blue Heron posted this in #help-forum
Great Blue HeronOP
I have a div that is overflow-y-auto and w-full. When the content requires a scroll bar, it gets shifted to the left the width of the scroll bar. Is there a different width constraint or a way to not shift the content once a scroll bar is present? My current workaround is to just set overflow-y-scroll
Answered by joulev
You are probably looking for overlay scroll bar. Check out https://ui.shadcn.com/docs/components/scroll-area
3 Replies
@Great Blue Heron I have a div that is overflow-y-auto and w-full. When the content requires a scroll bar, it gets shifted to the left the width of the scroll bar. Is there a different width constraint or a way to not shift the content once a scroll bar is present? My current workaround is to just set overflow-y-scroll
You are probably looking for overlay scroll bar. Check out https://ui.shadcn.com/docs/components/scroll-area
Answer
If you have a different component library, or unwilling to set up shadcn, check out https://www.radix-ui.com/primitives/docs/components/scroll-area
Great Blue HeronOP
@joulev Thank you! that fixed my issue. I nested my div inside of the scroll area and remove overflow-y-auto from the div. I noticed I want able to align in the ScrollArea which was why I had a need for the original div still.