Question

我有一个简单的网络应用程序，显示一个抽搐的流媒体列表，根据用户是想显示谁在线或离线，列表可以更长或更短，问题是当从长列表到短名单时反之亦然，窗口滚动条弹出并将我的一个元素移过大约一个像素。它甚至可能不那么引人注目，但它让我发疯。我在chrome和safari中尝试过它并且它在safari中没有问题所以我认为它可能是奇怪的铬。

这是具体的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

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

1 个答案: