element滾動(dòng)條組件el-scrollbar的使用詳解
更新時(shí)間：2022年04月19日 11:05:16 作者：風(fēng)如也
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
element官網(wǎng)文章中沒有介紹滾動(dòng)條的使用方式，但是官方滾動(dòng)條源碼中有滾動(dòng)條的樣式代碼
樣式效果
使用方法
頁(yè)面中引入 el-scrollbar 組件
<el-scrollbar style="height: 100%">
<!-- 滾動(dòng)條要包裹的內(nèi)容 -->
<div class="container"> 占位</div>
</el-scrollbar>
el-scrollbar 組件有以下幾個(gè)模塊的內(nèi)容：
el-scrollbar：需要指定高度el-scrollbar__wrap：包裹滾動(dòng)區(qū)域el-scrollbar__bar is-horizontal：橫向滾動(dòng)條el-scrollbar__bar is-vertical：縱向滾動(dòng)條
如果不需要橫向滾動(dòng)條（不加scoped）
<style lang="scss">
/* element滾動(dòng)條組件 隱藏水平滾動(dòng)條 */
.sidebar-wrapper .el-scrollbar__wrap {
overflow-x: hidden;
}
.is-horizontal {
display: none;
}
</style>
方式二：如果 滾動(dòng)條組件用在 Layout.vue 組件中，請(qǐng)不要在 Layout.vue 中引入隱藏橫向滾動(dòng)條的 css 樣式，這會(huì)影響后續(xù)如 下拉選擇框的滾動(dòng)條樣式
解決方法：創(chuàng)建一個(gè) css 文件，在 Layout.vue 中單獨(dú)引入css 文件，記得加上 Layout.vue 中滾動(dòng)條組件的父級(jí) class 類，避免影響后面的樣式
// common.css
/* element滾動(dòng)條組件 隱藏水平滾動(dòng)條 */
.sidebar-wrapper .el-scrollbar__wrap {
overflow-x: hidden;
}
Layout.vue
<style lang="scss" scoped> @import "../assets/css/common.css"; ... </style>
到此這篇關(guān)于element滾動(dòng)條組件el-scrollbar的使用詳解的文章就介紹到這了,更多相關(guān)element滾動(dòng)條組件el-scrollbar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼
這篇文章主要介紹了vue使用showdown并實(shí)現(xiàn)代碼區(qū)域高亮的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
如何解決vue-json-editor無法輸入中文、重影問題
文章介紹了如何解決vue-json-editor組件無法輸入中文和重影的問題,通過修改源碼并使用vue-json-edit-fix-cn組件來 fix 這兩個(gè)問題,同時(shí),文章還提供了如何移除舊的依賴包并安裝新的依賴包的步驟2025-01-01
這篇文章主要為大家詳細(xì)介紹了Vue折疊面板組件的封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能(完整代碼)
最近在開發(fā)移動(dòng)端項(xiàng)目，通過向左滑動(dòng)出現(xiàn)刪除按鈕，點(diǎn)擊即可刪除，怎么實(shí)現(xiàn)這個(gè)功能呢，接下來小編給大家?guī)韺?shí)例代碼幫助大家學(xué)習(xí)vue項(xiàng)目實(shí)現(xiàn)左滑刪除功能，感興趣的朋友跟隨小編一起看看吧2021-05-05
凡事有好就又壞，想必大家都知道Vue的作用與優(yōu)點(diǎn)，但是使用的規(guī)程中也總是有很多問題，接下來小編就來向大家講解使用Vue時(shí)應(yīng)注意的一些問題，希望能幫助到大家2021-09-09
unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決詳解
unplugin-auto-import?解決了vue3-hook、vue-router、useVue等多個(gè)插件的自動(dòng)導(dǎo)入,也支持自定義插件的自動(dòng)導(dǎo)入,是一個(gè)功能強(qiáng)大的typescript支持工具,這篇文章主要給大家介紹了關(guān)于unplugin-auto-import的配置以及eslint報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue中rem的配置的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
本文主要介紹了vue中process.env的具體使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue debug 二種方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09