如何避免由于鼠标进入时显示和隐藏滚动条而导致 div 闪烁

debugcn 发表于 Dev

巴拉格

我在鼠标悬停时显示滚动条，它在 UI 中产生闪烁效果。谁能建议如何避免它？代码在这里

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

ariferol01

首先，您可以将 CSS 添加width:到滚动条。之后，添加到.parent{}宽度（从 100% 中减去滚动条宽度）。您可以calc();为此使用 CSS功能。当您悬停父级时，添加 CSS 宽度 100% 。但是如果你想绝对 100% 使用表格宽度，有一个人通过 jQuery 解决了：https : //stackoverflow.com/a/17380697/8660891 *对不起，我的英语不好:)

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。