這篇文章將為大家詳細講解有關(guān)CSS修改默認滾動條樣式的方法,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)是一家專業(yè)提供延長企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為延長眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。
代碼如下:
這是內(nèi)容111
這里是內(nèi)容222
這里是內(nèi)容333
.inner{ width: 265px; height: 400px; position: absolute; top: 33px; left: 13px; /*cursor: pointer;*/ overflow:hidden; } .innerbox{ overflow-x: hidden; overflow-y: auto; color: #000; font-size: .7rem; font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑體",Arial,Tahoma; height: 100%; } /*滾動條樣式*/ .innerbox::-webkit-scrollbar {/*滾動條整體樣式*/ width: 4px; /*高寬分別對應(yīng)橫豎滾動條的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-thumb {/*滾動條里面小方塊*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: rgba(0,0,0,0.2); } .innerbox::-webkit-scrollbar-track {/*滾動條里面軌道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 0; background: rgba(0,0,0,0.1); }
關(guān)于CSS修改默認滾動條樣式的方法就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。