關(guān)于element?ui中的el-scrollbar橫向滾動(dòng)問題
element ui中el-scrollbar橫向滾動(dòng)
用過element ui組件庫的同學(xué)，應(yīng)該會(huì)發(fā)現(xiàn)它有一個(gè)內(nèi)置滾動(dòng)組件，官網(wǎng)對(duì)此組件沒有相關(guān)文檔說明
element ui官方文檔右側(cè)菜單即采用了該組件，如下圖
查看源碼，發(fā)現(xiàn)有一下props
props: {
native: Boolean, // 是否使用原生滾動(dòng)條，即不附加自定義滾動(dòng)條
wrapStyle: {}, // wrap的內(nèi)聯(lián)樣式
wrapClass: {}, // wrap的樣式名
viewClass: {}, // view的樣式名
viewStyle: {}, // view的內(nèi)聯(lián)樣式
noresize: Boolean, // 當(dāng)container尺寸發(fā)生變化時(shí)，自動(dòng)更新滾動(dòng)條組件的狀態(tài)
tag: { // 組件最外層的標(biāo)簽屬性
type: String,
default: 'div'
}
}根據(jù)html結(jié)構(gòu)，我們發(fā)現(xiàn).el-scrollbar__view元素下的正是我們需要滾動(dòng)的元素
經(jīng)測試，給viewStyle設(shè)置white-space: nowrap；樣式即可實(shí)現(xiàn)橫向滾動(dòng)；
同理也可以給viewClass設(shè)置white-space: nowrap；樣式
el-scrollbar顯示橫向滾動(dòng)條
讓橫向滾動(dòng)條出現(xiàn)，同時(shí)不顯示默認(rèn)的滾動(dòng)條，
需要在 el-scrollbar__wrap 添加
.el-scrollbar__wrap{
? overflow-x: auto;
? height: calc(100% + 20px); //多出來的20px是橫向滾動(dòng)條默認(rèn)的樣式
}在el-scrollbar 是 overflow: hidden; el-scrollbar__view必須是浮動(dòng)或 display: inline-block 才能出現(xiàn)滾動(dòng)條
.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
? white-space: nowrap;
? display: inline-block;
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue數(shù)據(jù)綁定簡析小結(jié)，本文將從源碼的角度來對(duì)Vue響應(yīng)式數(shù)據(jù)中的觀察者模式進(jìn)行簡析。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vue使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能
這篇文章主要介紹了vue中使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法
這篇文章主要介紹了Vue.js實(shí)現(xiàn)數(shù)據(jù)響應(yīng)的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
本篇文章主要介紹了詳解vue.js的事件處理器v-on:click，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded解決辦法
這篇文章主要給大家介紹了關(guān)于element-plus報(bào)錯(cuò)ResizeObserver?loop?limit?exceeded的解決辦法,文中通過代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章給大家講述了vue中關(guān)閉eslint的方法內(nèi)容，有需要的讀者們可以參考學(xué)習(xí)下。2018-08-08
詳解Vue中Computed與watch的用法與區(qū)別
這篇文章主要介紹了Vue中computed和watch的使用與區(qū)別，文中通過示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-04-04
這篇文章主要介紹了vue 組件注冊(cè)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue 組件的相關(guān)知識(shí)，感興趣的朋友可以了解下2020-11-11
很多朋友經(jīng)常遇到這樣的功能，只允許輸入數(shù)字，允許設(shè)置初始值、最大值、最小值，今天小編給大家分享示例代碼給大家介紹vue數(shù)字輸入框功能，感興趣的朋友一起看看吧2020-01-01
Vue中 v-if/v-show/插值表達(dá)式導(dǎo)致閃現(xiàn)的原因及解決辦法
在開發(fā)過程中經(jīng)常會(huì)發(fā)現(xiàn)當(dāng)頁面明明不應(yīng)該出現(xiàn)的元素或內(nèi)容會(huì)閃現(xiàn)一下然后消失，這篇文章給大家分享Vue中 v-if/v-show/插值表達(dá)式導(dǎo)致閃現(xiàn)的原因及解決辦法，一起看看吧2018-10-10