与容器相比，如何使滚动条更小 width/length

Question

我有一个水平滚动的容器。我需要创建没有容器宽度的滚动条。例如

  -------------------------------------------
  -                                         -
  -        My scrollable container          -
  -                                         -
  -------------------------------------------

        -----------------------------
          (this should be the scrollbar)

我现在的实现是这样的

  -------------------------------------------
  -                                         -
  -        My scrollable container          -
  -                                         -
  -------------------------------------------

  -------------------------------------------

我尝试了很多东西，包括添加 paddings/margins，还尝试了一种叫做 scrollbar-gutter 的东西。没有任何效果。我怎样才能得到一个中间有空格的滚动条，这样它就没有容器的整个宽度。

Answer 1

您需要向 scrollbar-track 添加广告 margin-left 和 margin-right（在水平滚动的情况下）以使滚动条看起来更小

::-webkit-scrollbar-track {
    margin-left: 100px;
    margin-right: 100px;
}

看看这个http://jsfiddle.net/6rpzxuqg/1/

与容器相比，如何使滚动条更小 width/length

How to make scrollbar in lesser width/length compared to the container

html

javascript

css

reactjs

tailwind-css