如何在CSS中为垂直滚动条添加水平间距？

Question

非常基本的用例，但不幸的是我还没有找到可行的解决方案：

我正在使用 CSS/Html 编写 UI，我只是想在垂直滚动条和右边距之间添加一些水平空间。

我如何实现这一目标？这是我的代码现在的样子。正如你所看到的，我尝试使用盒子大小+填充技巧，但不幸的是这并没有做到。

  ::-webkit-scrollbar {
      margin-right: 20px; /* This does not work, but offsetting with padding will */
      width: 8px;
  }

  ::-webkit-scrollbar-thumb {
      background-color:  #201F24;
      border-radius: 8px;
      border: 3px solid transparent;
  }

  ::-webkit-scrollbar-track {
      background-color: transparent;
  }

  ::-webkit-scrollbar-thumb:hover {
      background-color: #2B292F;
  }

  #container {
      width: 100%;
      height: 100vh;
      overflow-y: scroll;
      padding-right: 20px; /* Adjust to create the space between scrollbar and the right side */
      box-sizing: content-box; /* Ensure padding doesn't affect scroll area */
  }

https://jsfiddle.net/rtobgy5h/4/

这里缺少什么？

（这就是我想要实现的目标。看到黄色条没有粘在右边缘）

Answer 1

不完全清楚您想要为主体滚动条或容器滚动条实现什么滚动条，因为您当前拥有这两种滚动条。试试这个，只需调整容器大小或为正文配置滚动。

   ::-webkit-scrollbar { /* This does not work, but offsetting with padding will */
      width: 8px;
   }

   ::-webkit-scrollbar-thumb {
       background-color:  red;
       border-radius: 8px;
   }

   ::-webkit-scrollbar-track {
       background-color: green;
   }


   #container {
       width: 100%;
       height: 92vh;
       overflow-y: scroll;
   }