窗口滾動條切換元素結束了大約一個像素

Question

我有一個簡單的網絡應用程序，顯示抽搐拖纜列表，並且列表可以更長或更短，具體取決於用戶是否想要顯示誰在線或離線，問題是當從長列表跳到短列表或反之亦然時，窗口滾動條會彈出並將我的元素之一移動大約一個像素。它可能不是那麼明顯，但它讓我發瘋。我已經在鉻和safari中嘗試過它，並且它在safari中沒有問題，所以我認爲它可能會在Chrome中出現奇怪。

下面是具體的CSS-

.btn-col { 
    padding: 0px; 
    .cat-btn { 
    background-color: white; 
    position: relative; 
    width: 100%; 
    border: 0; 
    border-radius: 0px; 
    font-weight: bold; 
    font-size: 1.25em; 
    z-index: 0; 

    .down-triangle { 
     position: absolute; 
     bottom: 0px; 
     left: 50%; 
     transform: translateX(-50%); 
     border-top: 20px solid black; 
     border-left: 20px solid transparent; 
     border-right: 20px solid transparent; 
     transition: all .3s ease; 
     z-index: -10; 
    } 

    .vr { 
     position: absolute; 
     top: 50%; 
     transform: translateY(-50%); 
     right: 0px; 
     height: 20px; 
     border-right: 2px solid $purple; 
    } 
    } 
    #all-btn { 
    color: $purple; 
    #all-triangle { 
     border-top: 15px solid white; 
     bottom: -15px; 
    } 
    } 
    #online-btn { 
    color: $green; 

    #online-triangle { 
     border-top: 15px solid white; 
    } 
    } 
    #offline-btn { 
    color: $red; 

    #offline-triangle { 
     border-top: 15px solid white; 
    } 
    } 
} 

和鏈接到codepen - http://codepen.io/Davez01d/pen/MyepzJ?editors=0110

Answer 1

我認爲你不能做任何事情，以避免它。滾動條是必要的，因爲用戶列表變得更長了，如果你刪除它，你將無法向下滾動（容易）。您最終可以嘗試設置它hidden並使您自己的自定義滾動條像THIS或THIS