If you want to avoid flickering div due to show and hide scrollbar on mouse enter, here are a few solutions you can try:
-
Don't hide the scrollbars: The best way to solve this issue is to not hide the scrollbars at all. You can set
overflow-y: scroll;
oroverflow-y: auto;
to the parent element to enable scrolling..parent { width:100%; max-height: 400px; overflow-y: scroll; // or overflow-y:auto; } .table { width: 100%; }
-
Add a margin to the right: You can add a margin to the right of the parent element with the same size as the scrollbar width. This will prevent the content from shifting when the scrollbar appears.
.parent { width:100%; max-height: 400px; overflow-y: scroll; // or overflow-y:auto; margin-right: 16px; // Assuming default scrollbar width is 16px } .table { width: 100%; }
-
Use the
overflow: overlay
property: If you don't care about cross-browser compatibility, you can use theoverflow: overlay
property. This will allow the scrollbar to overlay the content, preventing the flickering..parent { width:100%; max-height: 400px; overflow: overlay; } .table { width: 100%; }
-
Use a visibility trick: You can use a visibility trick to hide the scrollbar initially and show it only when the parent element is hovered or focused. This will prevent the flickering.
.parent { width: 100%; max-height: 200px; overflow: auto; visibility: hidden; } .parent:hover, .parent:focus { visibility: visible; } .child { visibility: visible; } .table { width: 100%; }
-
Use the
scrollbar-gutter
property: Thescrollbar-gutter
CSS property allows you to reserve space for the scrollbar, preventing unwanted layout changes.scrollbar-gutter: stable both-edges;
-
Use a JavaScript library: You can use a JavaScript library like react-scrollbars-custom to handle the scrollbar. This library provides a custom scrollbar implementation that can be configured to prevent flickering.
// In your React component import ScrollbarsCustom from 'react-scrollbars-custom'; const MyComponent = () => { return ( <ScrollbarsCustom marginRight={0} inset={0}> <div className="content"> <table className="table"> ... </table> </div> </ScrollbarsCustom> ); };