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

Question

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>

The exact code to reproduce the issue is here https://stackblitz.com/edit/angular-wjd2f6?file=src%2Fapp%2Fapp.component.html — balaG, Jul 24 '19 at 18:56
You are required to post a [mcve] here **within your question** and NEVER a third party site! — Rob, Jul 24 '19 at 22:28

Francisco Santorelli · Answer 1 · 2023-03-22T11:06:14.707

4

You have two options:

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.
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

edited Mar 22 '23 at 11:06

answered Jul 24 '19 at 22:26

Francisco Santorelli

1,243
8
13

1

2nd option works a charm in the Electron app. thanks – Rama Rao M Oct 18 '22 at 16:25
1

`overflow: overlay` rocks! – Antonio Ooi Mar 21 '23 at 10:08
@AntonioOoi it does indeed! – Francisco Santorelli Mar 22 '23 at 11:07

score 0 · Answer 2 · answered Jul 24 '19 at 22:22

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%;
     }

score 0 · Answer 3 · edited Jul 25 '19 at 04:14

0

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>

edited Jul 25 '19 at 04:14

ThS

4,597
2
15
27

answered Jul 24 '19 at 22:27

Behzad AM

111
5

Adding a child div and using visibility. See the code. – Behzad AM Jul 24 '19 at 22:33
Thank you for explaining yourself. You should do that every time. https://stackoverflow.com/help/how-to-answer – Rob Jul 25 '19 at 00:35
Thank you Rob. I'll do it. CSS isn't like other programming languages that implement algorithms.In CSS world some techniques have been found by developers and they are hard to explain. – Behzad AM Jul 25 '19 at 11:57
When an element `visibility: hidden;` hides the element, but it still takes up space in the layout. Descendants of the element will be visible if they have visibility set to visible. Now we know why child is visible. Easily you can change the visibility parent on the hover event. – Behzad AM Jul 25 '19 at 12:18

ariferol01 · Accepted Answer · 2019-07-24T23:32:16.777

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>

Hi This solution works for Chrome and not for firefox. Is there a way to work on FF — balaG, Jul 25 '19 at 15:59
Can you try this `::-moz-scrollbar { width: 15px; }` on Firefox. I dont use now FF. I ifthis solve problem, i will add to my answer' css code. @balaG — ariferol01, Jul 25 '19 at 16:36

score 0 · Answer 5 · answered May 23 '23 at 12:56

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.

score 0 · Answer 6 · edited Aug 16 '23 at 19:07

0

This resolved the issue for me:

scrollbar-gutter: stable both-edges;

edited Aug 16 '23 at 19:07

Rich

6,470
15
32
53

answered Aug 14 '23 at 13:36

Regula Srikanth

1
1

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

6 Answers6