關(guān)于element?ui中的el-scrollbar橫向滾動(dòng)問題
element ui中el-scrollbar橫向滾動(dòng)
用過element ui組件庫(kù)的同學(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)測(cè)試，給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)文章
下面小編就為大家?guī)硪黄猇ue.js項(xiàng)目模板搭建圖文教程。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue3中使用router4 keepalive的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue之父子組件間通信實(shí)例講解(props、$ref、$emit)
組件間如何通信，也就成為了vue中重點(diǎn)知識(shí)了。這篇文章將會(huì)通過props、$ref和 $emit 這幾個(gè)知識(shí)點(diǎn)，來講解如何實(shí)現(xiàn)父子組件間通信。2018-05-05
webpack+vue+express(hot)熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法
今天小編就為大家分享一篇webpack+vue + express (hot) 熱啟動(dòng)調(diào)試簡(jiǎn)單配置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作
這篇文章主要介紹了antd Select下拉菜單動(dòng)態(tài)添加option里的內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于vue子組件獲取到它父組件數(shù)據(jù)的4種方法,對(duì)于vue來說組件之間的消息傳遞是非常重要的,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決
這篇文章主要介紹了誤引用vuex-persistedstate導(dǎo)致用戶信息無法清除問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue啟動(dòng)報(bào)錯(cuò)‘vue-cli-service serve‘問題及解決
這篇文章主要介紹了vue啟動(dòng)報(bào)錯(cuò)‘vue-cli-service serve‘問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue?路由切換過渡動(dòng)效滑入滑出效果的實(shí)例代碼
在支付寶賬單頁(yè)面有這樣一個(gè)特效切換過渡動(dòng)效滑入滑出效果，非常方便實(shí)用，那么這個(gè)功能如何實(shí)現(xiàn)的呢？下面小編通過vue實(shí)現(xiàn)路由切換過渡動(dòng)效滑入滑出效果，感興趣的朋友一起看看吧2022-03-03
在 Vue 中，如果直接對(duì)數(shù)組進(jìn)行操作，比如使用下標(biāo)直接修改元素，數(shù)組長(zhǎng)度不變時(shí)， Vue 是無法監(jiān)測(cè)到這種變化的，導(dǎo)致無法觸發(fā)視圖更新。針對(duì)該問題本文為大家整理了一些方法，需要的可以參考一下2023-01-01