純css修改瀏覽器scrollbar滾動(dòng)條樣式

wapeyang 發(fā)布于2019-08-02 12:04 / 2842人閱讀

使用css修改瀏覽器滾動(dòng)條樣式

::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
  background: hsla(0, 0%, 100%, 0.6);
}

::-webkit-scrollbar-track {
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(95,95,95,.4);
  transition: all .2s;
  border-radius: .5rem;

  &:hover {
    background-color: rgba(95,95,95, .7);
  }
}

GPU云服務(wù)器云服務(wù)器滾動(dòng)條樣式 asp 滾動(dòng)條樣式 css滾動(dòng)條滾動(dòng)條css

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/53313.html

相關(guān)文章

純css修改瀏覽器scrollbar滾動(dòng)條樣式

使用css修改瀏覽器滾動(dòng)條樣式 showImg(https://segmentfault.com/img/bVbjQ9D); ::-webkit-scrollbar { width: .5rem; height: .5rem; background: hsla(0, 0%, 100%, 0.6); } ::-webkit-scrollbar-track { border-radi...

android_c 2019-08-29 17:21 評(píng)論0 收藏0
前端項(xiàng)目修改默認(rèn)滾動(dòng)條樣式

摘要：滾動(dòng)條的背景滾動(dòng)條的滑塊樣式修改這個(gè)算很齊全的修改下邊這個(gè)很精簡(jiǎn)。值得一試這個(gè)的優(yōu)點(diǎn)在于鼠標(biāo)移上才會(huì)顯示修改的滾動(dòng)條體驗(yàn)很好提示下隱藏某軸的滾動(dòng)條代碼寫法之前我以為是半天沒變化前端項(xiàng)目修改默認(rèn)滾動(dòng)條樣式寫過挺多項(xiàng)目都需要改變滾動(dòng)條的默認(rèn)樣式并不想單獨(dú)下載和引入插件因此純css修改默認(rèn)滾動(dòng)條的樣式這次算統(tǒng)一整理下方法，直接上代碼。 &::-webkit...

douzifly 2019-08-30 15:44 評(píng)論0 收藏0
前端項(xiàng)目修改默認(rèn)滾動(dòng)條樣式

摘要：滾動(dòng)條的背景滾動(dòng)條的滑塊樣式修改這個(gè)算很齊全的修改下邊這個(gè)很精簡(jiǎn)。值得一試這個(gè)的優(yōu)點(diǎn)在于鼠標(biāo)移上才會(huì)顯示修改的滾動(dòng)條體驗(yàn)很好提示下隱藏某軸的滾動(dòng)條代碼寫法之前我以為是半天沒變化前端項(xiàng)目修改默認(rèn)滾動(dòng)條樣式寫過挺多項(xiàng)目都需要改變滾動(dòng)條的默認(rèn)樣式并不想單獨(dú)下載和引入插件因此純css修改默認(rèn)滾動(dòng)條的樣式這次算統(tǒng)一整理下方法，直接上代碼。 &::-webkit...

yearsj 2019-08-26 10:32 評(píng)論0 收藏0
移動(dòng)端

摘要：純，隱藏滾動(dòng)條，保留鼠標(biāo)滾動(dòng)效果。中彈性拉伸的現(xiàn)象解決禁用那個(gè)層或者的事件的默認(rèn)行為禁用音視頻自動(dòng)播放這個(gè)是蘋果官方明確提出的，為了用戶的利益。所以的瀏覽器依然是死角，不能做到自動(dòng)播放。只是一個(gè)文檔總結(jié)，純粹是喜歡SF的Markdown。 HTML CSS X軸上采用百分比字體大小以及部分不能用百分比衡量者，采用REM單位 JS 配置頁面根font-size大小 (f...

lowett 2019-08-20 18:21 評(píng)論0 收藏0