Question

任何类型的帮助都非常感谢您解决此问题： -

在此初始溢出被隐藏，并且在鼠标悬停时可以看到表溢出。
但是在chrome浏览器中，滚动条上的光标闪烁/闪烁。

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

Answer 1

似乎是Chrome 56的一个已知问题。

您可以通过添加这些css规则并根据您的设计进行调整来修复它：

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

Answer 2

你确定吗？它对我来说很好看：

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>

CSS

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

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

Answer 3

这可以使用一点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);">

请参阅CodePen

鼠标悬停时出现HTML / CSS滚动条问题

3 个答案: