我做了这个scrollbar:
正如你所看到的,拇指有盒状阴影。但问题是,影子并不随拇指移动它的工作原理是这样的
这只是一些非常基本的细节,我添加,以摆脱这个错误,所以给我。
这是一个愚蠢的错误,不会消失
.pr-20{
padding-right: 20px;
}
.w-217 {
width: 217px;
}
.h-220 {
height: 220px;
}
.text-right{
text-align: right;
}
.overflow-y-show {
overflow-y: scroll;
direction: ltr !important;
}
.custom-scroll::-webkit-scrollbar {
width: 9px;
}
/* the thin blue line */
.custom-scroll::-webkit-scrollbar-track {
background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0)
45%, #48eefc 45%, #48eefc 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0)
100%);
}
.custom-scroll::-webkit-scrollbar-thumb {
background-color: #48eefc;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 10px #48eefc;
-moz-box-shadow: 0px 0px 10px #48eefc;
box-shadow: 0px 0px 10px #48eefc;
}
<div class="overflow-y-show custom-scroll text-right pr-20 w-217 h-220">
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
<p>Test</p>
</div>
2条答案
按热度按时间u59ebvdq1#
你觉得可以吗?
kx1ctssn2#
我是这样解决这个问题的