CSS：向滚动条添加左边距

Question

有这样的设置：所以一个具有三列的弹性框，每一列都可以滚动，具体取决于它们的内容。

Codepen：https://codepen.io/michaelkonstreu/pen/GRmzeJy

现在我希望在滚动条可用/可见的情况下，在内容（列）和滚动条之间应该可以看到一个小的边距。

我试过这种方法：https://stackoverflow.com/a/21684424

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: #AAAAAA;
}

但我希望滚动条样式保持其浏览器默认值，但将我的边距添加到滚动条。所以我把 CSS 改成：

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}

在这种情况下，滚动条根本不再显示。

我的问题：我怎样才能在默认浏览器滚动条中添加一个margin left（左边框）属性，并保持其余滚动条样式不变。

Answer 1

您是否想为滚动条拇指添加一个边框，并在您的内容和滚动条之间添加空格，以便此代码可以正常工作

body{
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0; 
  left: 0;
  background: #dedede;
}

.main{
  position: relative;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 0 64px;
}

.main-content{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  column-gap: 32px;
}

.column{
  position: relative;
  height: 100%;
  width: calc(100% / 3);
  overflow-y: auto;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 8px 10px;
}

.card{
  position: relative;
  background: #fff;
  border: 1px solid #aaa;
  padding: 8px 12px;
  font-size: 20px;
  min-height: 96px;
  box-sizing: border-box;
  margin-bottom: 24px;
}

::-webkit-scrollbar {
  width: auto;
}

::-webkit-scrollbar-thumb {
  border-left: 4px solid rgba(0, 0, 0, 1);
  background-color: #AAAAAA;
}

::-webkit-scrollbar-track{
  background-color: #CCC;
}

<main class="main">
  <section class="main-content">
    <article class="column">
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
    </article>
    <article class="column">
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
    </article>
    <article class="column">
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
      <div class="card">Content ...</div>
    </article>
  </section>
</main>

听说您可以了解有关滚动条自定义的更多信息 https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

或者，请告诉我您想要多少更改，以便我编辑此代码，我会帮助您，此解决方案适合您，然后请给个赞