主页 / 问题 / 673593
Accepted
diralik
Asked:2020-06-01 04:29:57 +0800 CST2020-06-01 04:29:57 +0800 CST

Chrome 中滚动条的 margin-left

  • 772

有一个滚动条：

#parent {
  height: 200px;
  width: 300px;
  overflow-y: auto;
}

#child {
  height: 500px;
  width: 100%;
  background: teal;
}

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

 ::-webkit-scrollbar-track {
  background: #f6f5f3;
}

 ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}
<div id="parent">
  <div id="child"></div>
</div>

我想确保滚动条#child和2px. 基本上，我想写::-webkit-scrollbar { margin-left: 2px; }. 那是行不通的。我尝试添加padding-right: 2px到 element #parent，但是如果没有滚动条（即#child块中的内容很少（在示例中，高度#child是固定的，但在实际项目中它取决于内容）），然后会有额外的2px空白空间。如何2px在滚动条和块之间添加空间#child？

更新：

该块#parent有一个属性overflow-y: auto;。即是否出现滚动条取决于块的高度#child。示例中，高度#child是固定的，但在实际项目中，它取决于内容（有动态加载的文本，大量文本 => 会出现滚动条，少量文本 => 不会出现）。这都是因为如果没有滚动条，那么解决方案应该不会影响显示。也就是说2px，如果有滚动条，我想在内容和滚动条之间添加空闲空间，如果没有，则什么也不添加。

html

2 个回答

  1. Best Answer

    #parent {
  height: 200px;
  width: 300px;
  overflow-y: auto;
}

#child {
  height: 500px;
  background: teal;
}

::-webkit-scrollbar {
  width: 10px;  // 8px (ширина полосы прокрутки) + 2px (расстояние между полосой прокрутки и контентом)
}

::-webkit-scrollbar-track {
  background: #f6f5f3;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-left: solid 2px #fff;
}
    <div id="parent">
  <div id="child"></div>
</div>

    • 6

  2. 也许我误解了，但也许这就是他们的意思。使用的计算函数。

    #parent {
  height: 200px;
  width: 300px;
  overflow-y: auto;
}

#child {
  height: 500px;
  width: calc(100% - 2px);
  background: teal;
}

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

 ::-webkit-scrollbar-track {
  background: #f6f5f3;
}

 ::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}
    <div id="parent">
  <div id="child"></div>
</div>

    • 2

相关问题