与容器相比，如何使滚动条的宽度/长度更小

Posted 2023-03-07

【中文标题】与容器相比，如何使滚动条的宽度/长度更小

【英文标题】：How to make scrollbar in lesser width/length compared to the container

【发布时间】：2021-09-25 17:37:40

【问题描述】：

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

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

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

我目前的实现是这样的

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

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

我尝试了很多东西，包括添加填充/边距，还尝试了一种叫做滚动条装订线的东西。没有任何效果。我怎样才能得到一个滚动条之间有空格，这样它就没有容器的整个宽度。

【问题讨论】：

见w3schools.com/howto/howto_css_custom_scrollbar.asp

@ShivamJha 我实际上提到了这个。但它没有解释如何做我需要的事情

将宽度属性添加到<element>::-webkit-scrollbar-thumb 或<element>::-webkit-scrollbar-track

【参考方案1】：

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

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

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