Notification texts go here Contact Us Buy Now!

How to avoid Flickering div due to show and hide scrollbar on mouse enter

If you want to avoid flickering div due to show and hide scrollbar on mouse enter, here are a few solutions you can try:

  1. 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; or overflow-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%;
              }
              
            
  2. 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%;
              }
              
            
  3. Use the overflow: overlay property: If you don't care about cross-browser compatibility, you can use the overflow: 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%;
              }
              
            
  4. 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%;
                }
              
            
  5. Use the scrollbar-gutter property: The scrollbar-gutter CSS property allows you to reserve space for the scrollbar, preventing unwanted layout changes.
              
                scrollbar-gutter: stable both-edges;
              
            
  6. 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>
                  );
                };
              
            

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.