我需要制作比其父 block 更短的滚动条。如果它只支持 CSS 就完美了!我该怎么做?
img that shows exactly what I need
最佳答案
在后代,如果其他人在 2020 年或以后参与其中并想要一些想法,请尝试 ::-webkit-scrollbar
元素。 CSS Tricks 详细描述了它们,尽管它有助于一些技术阅读。完成上述技巧所需的部分是 ::-webkit-scrollbar-button:end:increment
。如果您希望它在底部对齐,您将使用 ::-webkit-scrollbar-button:start:decrement
。如果您使用水平条,您将使用 width
而不是 height
。
除了使用 JS 滚动条库之外,我还没有想出如何在非 webkit 浏览器上执行此操作。如果您想标准化事物,我会推荐其中之一。一些例子du jour包括:
.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>
https://stackoverflow.com/questions/38021252/