總會遇到需要修改頁面滾動條的需求
如果需要全局修改 就在大文件中添加
::-webkit-scrollbar { /* 滾動條整體樣式 */ width: 6px; /* 寬高分別對應橫豎滾動條的尺寸 */ background: rgb(235, 238, 245); border-radius: 10px; -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.2); } ::-webkit-scrollbar-thumb { /* 滾動條里的小方塊 */ border-radius: 3px; background: #2e4a89; height: 120px; } ::-webkit-scrollbar-track { /* 滾動條里面的軌道 */
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: rgba(0,0,0,0.1); }
需要某個特定的滾動條修改 就在：：前加入需要修改的類名
如果前面的修改沒有生效 安裝了less的話 則加上/deep/
/deep/.ant-table-body::-webkit-scrollbar { /* 滾動條整體樣式 */ width: 6px; /* 寬高分別對應橫豎滾動條的尺寸 */ background: rgb(235, 238, 245); border-radius: 10px; -webkit-box-shadow: inset 1px 0 1px rgba(0,0,0,0.2); } /deep/.ant-table-body::-webkit-scrollbar-thumb { /* 滾動條里的小方塊 */ border-radius: 3px; background: #2e4a89; height: 120px; } /deep/.ant-table-body::-webkit-scrollbar-track { /* 滾動條里面的軌道 */
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 10px; background: rgba(0,0,0,0.1); }
可以在類名前面添加/deep/