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