Question

我正在尝试在滚动条和div容器的顶部边框和底部边框之间留一些空间。换句话说，我正在尝试使滚动条轨道更短。

这是我的CSS：

::-webkit-scrollbar {
      width: 8px;
      height: 300px ;
      background-color: grey;
      border-radius: 5px;
      border: solid 12px transparent;
      margin-top: 10px;
      margin-bottom: 10px;

}
::-webkit-scrollbar-thumb {
      background: red;

      border-radius: 5px;
      width: 8px;
}

::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement {
      display: block;
      height: 10px;
      background-color: transparent;
}

在上面的css中，我尝试添加一个按钮，该按钮的高度使我需要从顶部开始对轨道进行边距处理，但是由于某种原因，轨道并未缩短，滚动条的拇指无法完全向上移动，并且下。上面的css似乎并没有使音轨更短，但是它缩短了大拇指的行程。

我还尝试过使按钮的背景不是透明的，而是滚动条容器背景的颜色，但随后轨道失去了我需要的边框半径。

有人建议如何实现这一目标吗？预先感谢。

Answer 1

您可以在滚动条样式中使用"react-native-camera": "^1.6.4", "react-native-firebase": "^5.1.1",和border-top来获得页边距效果。

border-bottom的{{1}}和background-color的{{1}}必须相同。

div

border-color

如何给自定义滚动条加边距？

1 个答案: