Element-ui之ElScrollBar組件滾動條的使用方法-創(chuàng)新互聯(lián)

在使用vue + element-ui 搭建后臺管理頁面的時(shí)候，做了一個(gè)頭部、側(cè)欄、面包屑固定的布局，導(dǎo)航欄和主要內(nèi)容區(qū)域當(dāng)內(nèi)容超出時(shí)自動滾動。

創(chuàng)新互聯(lián)公司專注于朝天企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計(jì),商城網(wǎng)站建設(shè)。朝天網(wǎng)站建設(shè)公司,為朝天等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站制作，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

使用的原因：

原來是采用優(yōu)化瀏覽器樣式的方式，對滾動條進(jìn)行樣式調(diào)整。但這個(gè)方法并不兼容火狐瀏覽器，在火狐訪問時(shí)依然是瀏覽器默認(rèn)的滾動條樣式。

.sidebar {
 position: fixed;
 border-right: 1px solid rgba(0,0,0,.07);
 overflow-y: auto;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 transition: transform .25s ease-out;
 width: 300px;
 z-index: 3;
}
.sidebar::-webkit-scrollbar {
 width: 4px
}

.sidebar::-webkit-scrollbar-thumb {
 background: transparent;
 border-radius: 4px
}

.sidebar:hover::-webkit-scrollbar-thumb {
 background: hsla(0,0%,53%,.4)
}

.sidebar:hover::-webkit-scrollbar-track {
 background: hsla(0,0%,53%,.1)
}

分享名稱：Element-ui之ElScrollBar組件滾動條的使用方法-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article36/dhsipg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、微信小程序、移動網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、定制開發(fā)、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)