html - 窗口滚动条将元素移动大约一个像素

Question

我有一个简单的网络应用程序，它显示了一个 twitch 流媒体列表，该列表可以更长或更短，具体取决于用户是想显示谁在线还是离线，问题是当从长列表进入短列表时反之亦然，窗口滚动条弹出并将我的一个元素移动大约一个像素。它甚至可能不那么引人注目，但它让我发疯。我已经在 chrome 和 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;
    }
  }
}

还有代码笔的链接 - http://codepen.io/Davez01d/pen/MyepzJ?editors=0110

Answer 1

我认为您无法采取任何措施来避免它。滚动条是必需的，因为用户列表会变长，如果删除它，您将无法(轻松)向下滚动。您最终可以尝试将其设置为 hidden 并制作您自己的自定义滚动条，如 THIS或 THIS