HTML/CSS scrollbar issue on mouse hover

Question

Any type of Help is appreciate for resolving this issue:-

In this initially overflow is hidden, and on mouse hover of table overflow is visible.
But in chrome browser cursor over scrollbar is flickering/ blinking.

.one-scroll {
  max-height: 160px;
  max-width: 450px;
  background: #f7f7f7;
  position: relative;
  z-index: 100 !important;
}
.one-scroll.table-scrollable {
  overflow-x: hidden;
  overflow-y: hidden;
}
.one-scroll.table-scrollable:hover {
  overflow-x: auto;
  overflow-y: auto;
  z-index: 100 !important;
  }

<!Doctype html>
<html>
<head>
<style></style>
</head>
<body>
<br/>
<br/>
<section class="one-scroll table-scrollable">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Select Module</th>
        <th>Select Fields</th>
        <th>Select Operators</th>
        <th>Select Vaue</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
      <tr>
        <td><Select class="form-control">
            <option>Related Module</option>
            <option>Invoice</option>
            <option>Account</option>
            <option>Dispatch</option>
            <option>Contact</option>
          </select></td>
        <td><Select class="form-control">
            <option>Selct Field</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Operators</option>
          </select></td>
        <td><Select class="form-control">
            <option>Select Value</option>
            <option>List Items</option>
          </select></td>
        <td><input type="button" class="btn btn-warning" value="Add Row" /></td>
      </tr>
    </tbody>
  </table>
</section>
</body>
</html>

here you can find your answer: http://stackoverflow.com/questions/10015389/showing-scrollbars-only-when-mouseover-div — Radu Onisor, Mar 03 '17 at 09:21
Answer from "kizu" here: http://stackoverflow.com/questions/10015389/showing-scrollbars-only-when-mouseover-div — Radu Onisor, Mar 03 '17 at 09:22
hy @radu-onisor thanks for your reply, But the issue didn't solve I am using "ChromeVersion 56.0.2924.87 (64-bit)". — Pushkar Adhikari, Mar 03 '17 at 09:28

score 4 · Answer 1 · answered Mar 03 '17 at 09:33

Seems like a known issue with Chrome 56.

You can fix it by adding these css rules and tweaking them to suit your design:

*::-webkit-scrollbar {
    width: 6px!important;
    height: 6px!important;
}
*::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,.2);
}

score 1 · Answer 2 · answered Mar 03 '17 at 09:34

are you sure ? it looks good to me:

THE HTML

<h2>Hover it</h2>
<div class="scrollbox">
  <div class="scrollbox-content">Hover me! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere velit, repellat voluptas ipsa impedit fugiat voluptatibus. Facilis deleniti, nihil voluptate perspiciatis iure adipisci magni, nisi suscipit aliquam, quam, et excepturi!</div>
</div>

THE CSS

.scrollbox {
  width: 10em;
  height: 10em;
  overflow: auto;
  visibility: hidden;
}
.scrollbox-content,
.scrollbox:hover {
  visibility: visible;
}

http://codepen.io/kizu/pen/OyzGXY`

score 0 · Answer 3 · answered Mar 03 '17 at 18:40

This can work with a little bit of JavaScript.

CSS:

 .scroll { overflow: auto; }
 .noscroll { overflow: hidden; }

JavaScript:

function setScroll(elem) {
    elem.classList.remove("noscroll");
    elem.classList.remove("scroll");
    elem.className += " scroll";
}

function setNoScroll(elem) {
    elem.classList.remove("noscroll");
    elem.classList.remove("scroll");
    elem.className += " noscroll";
}

html:

<section class="scrollbox noscroll"
    onmouseover="setScroll(this);" 
    onmouseout="setNoScroll(this);">

see CodePen

HTML/CSS scrollbar issue on mouse hover

3 Answers3