CODEWITHSUNDEEP
htmlcss
balaG
balaG

Reputation: 461

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

I am showing a scroll bar on mouse hover and it makes a flicker effect in UI. Can anyone suggest how to avoid it? The code is here

  .parent {
        width:100%;
        max-height: 400px;
        overflow-y: hidden;
      }
     .parent:hover {
        overflow-y: scroll;
     }
     .table {
       width: 100%;
     }
<div class="parent">
   <table class="table">
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
    </table>
</div>

Upvotes: 0

Views: 10850

Answers (7)

Francisco Santorelli
Francisco Santorelli

Reputation: 1338

You have two options:

  1. add a margin to the right at the same size of the scroll width (I believe default to be 16px). margin-right: 16px. I'm not pretty sure about this method though.

  2. If you don't care too much about cross-browser compatibility, just use overflow: overlay and you got it

Edit: IE is dead so we can all be happy now with #2

Edit 2: Overlay is now legacy name for auto. This response might be outdated because of this.

Upvotes: 4

Ronak Bhandari
Ronak Bhandari

Reputation: 332

I am using https://www.npmjs.com/package/react-scrollbars-custom and fixed the flicker issue by setting the margin right as 0px to the ScrollbarsCustom-Scroller and also setting the inset to 0px for the ScrollbarsCustom-Wrapper to maintain the padding of the container.

Upvotes: 0

Regula Srikanth
Regula Srikanth

Reputation: 1

This resolved the issue for me:

scrollbar-gutter: stable both-edges;

Upvotes: 0

Gianmarco
Gianmarco

Reputation: 842

instead of manually adding the scrollbar width you can use the scrollbar-gutter CSS property:

The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

Upvotes: 0

Behzad AM
Behzad AM

Reputation: 109

Use this trick to solve that:

.parent {
  width: 100%;
  max-height: 200px;
  overflow: auto;
  visibility: hidden;
}

.parent:hover,
.parent:focus {
  visibility: visible;
}

.child {
  visibility: visible;
}

.table {
  width: 100%;
}
<div class="parent">
  <div class="child">
    <table class="table">
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
      <tr>
        <td>Key</td>
        <td>Value</td>
      </tr>
    </table>
  </div>
</div>

Upvotes: 0

ariferol01
ariferol01

Reputation: 249

Firstyl you can add CSS width: to scroll bar. After that, add to .parent{} width (subtract scroll bar width from 100%).You can use CSS calc(); function for this. When you hover parent, add CSS width 100% . But if you want to use the table width absolutely 100%, there is a guy solved via jQuery: https://stackoverflow.com/a/17380697/8660891 *Sorry for my bad English :)

::-webkit-scrollbar {
    width: 15px;
    padding:0px;
}
::-webkit-scrollbar-thumb {
  min-height:50px;
  background-color:#888;
  height: 50px;
}
::-webkit-scrollbar-track {
    background: #e3e3e3;
}
.parent {
        width:calc(100% - 15px);
        max-height: 200px;
        overflow-y: hidden;
      }
     
     .parent:hover {
        overflow-y: scroll;
        width: 100%;
     }
     .table {
       width: 100%;
     }
<div class="parent">
   <table class="table">
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
      <tr><td>Key</td><td>Value</td></tr>
    </table>
</div>

Upvotes: 0

Anthony Cregan
Anthony Cregan

Reputation: 983

If this table is to be scrollable, its bad UI practice to only show that it is scrollable when the user hovers over it (what about touch devices?).

The best way to solve this and the flickering would be to not hide the scrollbars at all like so:

  .parent {
        width:100%;
        max-height: 400px;
        overflow-y: scroll; // or overflow-y:auto; 
      }
     .table {
       width: 100%;
     }

Upvotes: 1

Related Questions