CSS滾動條的頂部和底部角落不改變

Question

ul.list_view::-webkit-scrollbar { 
background: lightyellow; 
width: 12px; 
    } 
    ::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 6px #57c5a0; 
border-radius: 10px; 
} 
    ::-webkit-scrollbar-thumb { 
border-radius: 10px; 
background:#57c5a0; 
-webkit-box-shadow: inset 0 0 6px #000000; 
} 

Hi.This是定製我scrollbar.As的代碼，你可以在右上角看到，而且在滾動條的右下角，還有一個白色的空間..我不知道如何使它消失。請幫助。

Answer 1

它不是白色的，而是你的CSS中指定的lightyellow。您只需將背景從lightyellow更改爲transparent即可。

ul::-webkit-scrollbar { 
    background: transparent; 
} 

如果您想要擁有完全透明的軌道，請從::-webkit-scrollbar-track中刪除箱形陰影。

Answer 2

可以在細節瞭解這裏定製的webkit滾動條

樣品

::-webkit-scrollbar { 
 
    width: 12px; 
 
} 
 
    
 
::-webkit-scrollbar-track { 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
 
    border-radius: 10px; 
 
} 
 
    
 
::-webkit-scrollbar-thumb { 
 
    border-radius: 10px; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
 
}

<br> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

Source

Answer 3

這裏是一個解決方案。從webkit-scrollbar-track刪除-webkit-box-shadow。

body { 
 
    min-height: 1000px; 
 
    background-color: #d5d5d5; 
 
} 
 
::-webkit-scrollbar { 
 
    width: 12px; 
 
} 
 
::-webkit-scrollbar-track { 
 
    border-radius: 10px; 
 
    background: lightyellow; 
 
} 
 
::-webkit-scrollbar-thumb { 
 
    border-radius: 10px; 
 
    background: #57c5a0; 
 
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); 
 
}