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