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

Question

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

感谢任何类型的帮助来解决此问题：-

在这个最初的溢出是隐藏的，并且在鼠标悬停时可以看到表格溢出。
但在 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;
  }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ste*_*ini 4

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

您可以通过添加这些 css 规则并调整它们以适合您的设计来修复它：

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	1930 次
最近记录：	9 年，6 月前