我在鼠標懸停時顯示一個滾動條，它在用戶界面上產生閃爍效果。有人能建議怎么避免嗎？代碼在這里

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

你有兩個選擇:

在右邊添加一個與滾動寬度相同的邊距(我相信默認是16px)。右邊距:16px。不過，我不太確定這種方法。

如果你不太在乎跨瀏覽器兼容性，只要使用overflow: overlay就可以了

編輯:IE已經死了，所以我們現在可以對#2滿意了

首先，你可以在滾動條上添加CSS寬度。之后，添加到。父{}寬度(從100%中減去滾動條寬度)?？梢杂肅SS calc()；為此函數。當你懸停父項時，將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>

如果這個表是可滾動的，那么只有當用戶懸停在它上面時才顯示它是可滾動的，這是不好的UI實踐(觸摸設備呢？).

解決這個問題和閃爍的最好方法是不要隱藏滾動條，就像這樣:

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

用這個技巧來解決:

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

您可以使用scrollbar-gutter CSS屬性，而不是手動添加滾動條寬度:

scrollbar-gutter CSS屬性允許作者為滾動條保留空間，防止在內容增長時出現不必要的布局變化，同時避免在不需要滾動時出現不必要的視覺效果。