Horizontal ScrollBar not displaying when mouse is hover

Question

I have a table that is relatively large. I want a horizontal scroll bar to be displayed when I move the mouse over it. The current problem is that this scrollbar appears when the page loads, but disappears a second later.

I really want this scrollbar to appear when I move the mouse over it.

This is the actual code, the table is scrollable but the scrollbar is displaying when mouse is hover.

.mat-table {
 position: relative;
 overflow: auto;
 width: 100%;
 height: 100%;
}

.mat-row, .mat-header-row {
 min-width: 1800px;
 width: 100%;
}

I think this may be a duplicate of [CSS - Overflow: Scroll; - Always show vertical scroll bar?](https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar) Please check if the answers here solve your problem; if not, please update the post explaining how it failed to solve your problem so the community can understand how the issues differ. Good luck, and happy coding! (One note; while your question is about horizontal scrollbars and the linked post is about vertical scrollbars, I believe the solution may be the same). — Alexander Nied, Mar 08 '22 at 17:28
It seems to be really related to MacOs, and my goal is not to display always but only when mouse is hover — Kévin, Mar 08 '22 at 17:34
Good point-- I've retracted my close vote. I tried futzing around with the linked solution using `:hover` but didn't get anywhere. I did find [another question regarding specifically showing scrollbars on hover](https://stackoverflow.com/questions/15845194/make-scroll-bar-appear-on-hover-of-scroll-bar-track) but the solution was, unfortunately, jQuery-based. Ideally a CSS-only solution is out there for this question... — Alexander Nied, Mar 08 '22 at 17:45
Yes i don't want to use at all jquery for this. Css is only needed — Kévin, Mar 08 '22 at 18:07
@Kévin I have posted a possible answer to the problem. This is the possible solution, I can take out from the information given in the question. If that answer doesn't work, please try including more information in your question to make it more **understandable**. — Blind Spot, Mar 08 '22 at 19:07

score 0 · Answer 1 · answered Mar 08 '22 at 19:04

Wrap your div or table inside another div, <div class="flow"></div> and in stylesheet,

    .flow {
      overflow: hidden;
    }

    .flow:hover {
      overflow-x: scroll;
    }

Why does this work when I wrap the element and not without being wrapped?

This is something, even I don't know but it has probably something to do with the declaration of width and height I guess.

Here's an example using this method:

.mat-table {
  position: relative;
  overflow: auto;
  width: 100%;
  height: 100%;
}

.mat-row,
.mat-header-row {
  min-width: 1800px;
  width: 100%;
}

.flow {
  overflow: hidden;
}

.flow:hover {
  overflow-x: scroll;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    .flow {
      overflow: hidden;
    }
    
    .flow:hover {
      overflow-x: scroll;
    }
    
    .mat-table {
      position: relative;
      overflow: auto;
      width: 100%;
      height: 100%;
    }
    
    .mat-row,
    .mat-header-row {
      min-width: 1800px;
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="flow">
    <div class="mat-header-row">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at nisi ut metus pharetra dapibus non non justo. Ut nunc erat, viverra et tellus sed, pellentesque vulputate arcu. Integer viverra eros at nisl lacinia, fermentum tempor dui finibus.</div>
    <div class="mat-row">Sed placerat eget massa id suscipit. Fusce sed cursus mi. Praesent sodales enim at elementum feugiat. Pellentesque et bibendum massa. Aliquam ac erat a tellus semper sollicitudin. Aliquam congue sollicitudin est eget viverra.</div>
    <div class="mat-row">Maecenas id sapien ac erat imperdiet efficitur eget auctor diam. Ut feugiat lacus dui, sit amet semper sapien consequat quis. Aliquam vitae mollis mauris. Sed a sem suscipit purus placerat semper vel non tortor. Proin pellentesque accumsan vestibulum. Sed id lobortis ipsum. Pellentesque facilisis volutpat libero nec interdum.</div>
  </div>
</body>

</html>

Your example is working, but it does not work with mat-table. The question is fully understable "display a slide bar when mouse is hover, simple as it :) " , you have a gif too where you can see that the slide bar is displaying after the refresh but disappear few seconds later. — Kévin, Mar 09 '22 at 07:18
Actually I said it wrong, my bad; your question is understandable but I want more code if you can provide, like classes used by parent divs and exact look of table and elements inside it. Because I don't face problems, using the same classes as you've used. — Blind Spot, Mar 09 '22 at 12:29

score 0 · Answer 2 · answered Mar 09 '22 at 19:43

0

My code is working properly. After some research it seems to be caused by a Chrome bug.

To solve it enter in your search bar : chrome://flags

And then set Overlay Scrollbars to disabled

You can set it back to auto after that

answered Mar 09 '22 at 19:43

Kévin

497
10
37

Horizontal ScrollBar not displaying when mouse is hover

2 Answers2