Question

我在鼠标悬停时显示滚动条，它在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>

Answer 1

如果该表是可滚动的，则其不良的UI做法是仅在用户将鼠标悬停在该表上时才显示它是可滚动的（触摸设备是什么？）。

解决此问题和闪烁的最佳方法是完全不隐藏滚动条，就像这样：

  .parent {
        width:100%;
        max-height: 400px;
        overflow-y: scroll; // or overflow-y:auto; 
      }
     .table {
       width: 100%;
     }

Answer 2

您有两个选择：

1）在滚动宽度的相同尺寸（我认为默认值为16px）的右边添加一个边距。 margin-right: 16px。不过，我不太确定这种方法。

2）如果您不太关心跨浏览器的兼容性，只需使用overflow: overlay就可以了

Answer 3

使用此技巧解决该问题：

.parent {
  width: 100%;
  max-height: 200px;
  overflow: auto;
  visibility: hidden;
}

.parent:hover,
.parent:focus {
  visibility: visible;
}

.child {
  visibility: visible;
}

.table {
  width: 100%;
}

<div class="parent">
  <div class="child">
    <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>
    </table>
  </div>
</div>

Answer 4

首先，您可以将CSS width:添加到滚动条。之后，增加.parent{}的宽度（减去100％的滚动条宽度）。您可以使用CSS calc();函数。当您将父对象悬停时，请添加CSS width 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>

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

4 个答案: