在css 檔案裡定義樣式:
.mat-tab-body-content {
/*---------谷歌----------*/
&::-webkit-scrollbar {
width: 4px;
height: 532px;
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #d9d9d9;
/*----------火狐---------*/
scrollbar-width: thin;
scrollbar-color: #d9d9d9;
注: (1) &::-webkit-scrollbar :定義滾動條寬高及背景,寬高分別對應橫豎滾動條的尺寸
(2)&::-webkit-scrollbar-thumb : 定義滑塊顏色、內陰影及圓角
(3)scrollbar-color可以設定滑塊顏色 滾動條背景顏色,scrollbar-width可以設定滾動條寬度有三種(thin、auto、none)
css修改谷歌瀏覽器和火狐瀏覽器的滾動條樣式
css 谷歌瀏覽器滾動條樣式 webkit scrollbar webkit scrollbar track piece webkit scrollbar thumb 也可以單獨設定橫向滾動條和縱向滾動條的背景顏色 webkit scrollbar thumb vertical webkit scr...
相容火狐瀏覽器滾動條樣式
首先需要引入jquery和jquery.nicescrollnpm install jquery npm install jquery.nicescroll以下為jquery.nicescroll官網 在元件中使用 box div div template import from jquery im...
火狐瀏覽器滾動條的樣式問題
網上查了很多關於修改火狐瀏覽器樣式的資料,發現千篇一律,能解決問題的可以說沒有。基於webkit的瀏覽器 滾動條樣式 webkit scrollbar webkit scrollbar thumb webkit scrollbar track 火狐 overflow y scroll scrollb...