[英]How to make ::-webkit-scrollbar-thumb smaller?
I customize scrollbar by CSS3. 我通过CSS3自定义滚动条。 And I don't know, how to make scrollbar-thumb smaller (shorter).
而且我不知道如何使滚动条拇指变小(变短)。 Width or height don't work.
宽度或高度无效。 Can anybody help me?
有谁能够帮助我?
#parent { width: 300px; height: 300px; padding: 20px; overflow: auto; } #child { width: 250px; height: 1000px; margin: 0 auto; border: 2px solid #8c1b21; } #parent::-webkit-scrollbar { width: 15px; background-color: #B79889; border-radius: 5px; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } #parent::-webkit-scrollbar-thumb { background-color: #8c1b21; border-radius: 5px; }
<div id="parent"> <div id="child"></div> </div>
Height of thumb depends on the height of the div
where you are applying scroll
拇指的高度取决于要应用
scroll
的div
的高度
#parent { width: 300px; height: 300px; padding: 20px; overflow: auto; } #child { width: 250px; height: 4000px; margin: 0 auto; border: 2px solid #8c1b21; } #parent::-webkit-scrollbar { width: 10px; background-color: #B79889; border-radius: 5px; box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } #parent::-webkit-scrollbar-thumb { background-color: #8c1b21; border-radius: 5px; }
<div id="parent"> <div id="child"></div> </div>
This works for me, "::-webkit-scrollbar /width" is the key 这对我有用,“ ::-webkit-scrollbar / width”是关键
::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
::-webkit-scrollbar
{
width: 4px !important;
background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb
{
background-color: $apple-gray;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.