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