我在鼠標(biāo)懸停時(shí)顯示一個(gè)滾動(dòng)條，它在用戶界面上產(chǎn)生閃爍效果。有人能建議怎么避免嗎？代碼在這里

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

你有兩個(gè)選擇:

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

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

編輯:IE已經(jīng)死了，所以我們現(xiàn)在可以對(duì)#2滿意了

首先，你可以在滾動(dòng)條上添加CSS寬度。之后，添加到。父{}寬度(從100%中減去滾動(dòng)條寬度)。可以用CSS calc()；為此函數(shù)。當(dāng)你懸停父項(xiàng)時(shí)，將CSS寬度增加100%。 但是如果你想100%使用表格寬度，有一個(gè)人可以通過jQuery解決:https://stackoverflow.com/a/17380697/8660891 *抱歉我的英語(yǔ)不好:)

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

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

解決這個(gè)問題和閃爍的最好方法是不要隱藏滾動(dòng)條，就像這樣:

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

用這個(gè)技巧來(lái)解決:

.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屬性，而不是手動(dòng)添加滾動(dòng)條寬度:

scrollbar-gutter CSS屬性允許作者為滾動(dòng)條保留空間，防止在內(nèi)容增長(zhǎng)時(shí)出現(xiàn)不必要的布局變化，同時(shí)避免在不需要滾動(dòng)時(shí)出現(xiàn)不必要的視覺效果。