我该如何制作一个侧边栏滚动条作为Facebook中的滚动条

Question

有没有一种方法可以制作类似于Facebook侧边栏的滚动条？我想只使用css制作一个滚动条，拇指应该比轨迹窄，悬停时可以看到，我能找到的所有例子都是拇指比轨迹宽，我使用的浏览器是chrome，下面你可以找到我引用的facebook滚动条的视频。

facebook侧边栏滚动条

Answer 1

CSS有一个内置的滚动条样式。使用webkit滚动条作为宽度，使用webkit滚条轨迹作为轨迹，使用webkit滚动条拇指作为拇指，您可以向webkit滚动栏拇指添加任何悬停属性。下面的代码将使滚动条几乎像facebook的一样。

::-webkit-scrollbar {
width: 10px;
border: none;
}

::-webkit-scrollbar-track {
border: none;
}

::-webkit-scrollbar-thumb {
background: #d1cece; 
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: darkgray; 
}