javascript - 如何使滚动条长度小于父 block ？

Question

我需要制作比其父 block 更短的滚动条。如果它只支持 CSS 就完美了!我该怎么做？

img that shows exactly what I need

Answer 1

在后代，如果其他人在 2020 年或以后参与其中并想要一些想法，请尝试 ::-webkit-scrollbar 元素。 CSS Tricks 详细描述了它们，尽管它有助于一些技术阅读。完成上述技巧所需的部分是 ::-webkit-scrollbar-button:end:increment。如果您希望它在底部对齐，您将使用 ::-webkit-scrollbar-button:start:decrement。如果您使用水平条，您将使用 width 而不是 height。

除了使用 JS 滚动条库之外，我还没有想出如何在非 webkit 浏览器上执行此操作。如果您想标准化事物，我会推荐其中之一。一些例子du jour包括:

1. simplebar
2. simple-scrollbar

.scroller {
  height: 200px;
  width: 400px;
  overflow: auto;
  background: grey;
}

.big-thing {
  height: 800px;
  width: 100%;
}

.scroller::-webkit-scrollbar {
  width: 10px;
}
.scroller::-webkit-scrollbar-track-piece {
  background: white;
  border: solid 1px black;
}
.scroller::-webkit-scrollbar-thumb {
  background: black;
}
.scroller::-webkit-scrollbar-button:end:increment {
  height: 50%;
  display: block;
  background: transparent;
}

<div class="scroller">
  <div class="big-thing"></div>
</div>