vue+elementUI中的滾動條el-scrollbar使用及說明
更新時間：2026年02月10日 09:09:09 作者：是日前端
文章介紹了如何在Vue和ElementUI中使用`el-scrollbar`組件來替換原生滾動條,并提供了一個示例代碼,同時,文章分享了隱藏橫向滾動條的經(jīng)驗,通過調(diào)整CSS樣式解決了原生滾動條顯示的問題
vue+elementUI的滾動條el-scrollbar
由于需要使用滾動條，原生滾動條長的太丑，查到了elementUI中的滾動條
el-scrollbar，使用簡潔方便
樣式如下：
使用方法
如下所示：
外部的div必須給固定高度才行
<!-- 外部div -->
<div style="height: 650px; display: flex" class="cab" >
<el-scrollbar style="height:100%">
<!-- 內(nèi)部div -->
<div></div>
</el-scrollbar>
</div>
一般根據(jù)需要可以隱藏橫向滾動條，網(wǎng)上查的是這個，但是我用起來沒生效
.el-scrollbar__wrap{
overflow-x: hidden;
}
后來自己f12倒騰出來了，我之前只用了下面這個，我自己這可以，結(jié)果別人那原生的橫向滾動條也跑出來了
.cab .is-horizontal{
display: none;
}
后來又倒騰，終于隱藏了
.cab .is-horizontal{
display: none;
}
.cab .el-scrollbar__wrap {
overflow-x: hidden;
}
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue項目main.js使用方法的相關(guān)資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果,用戶點擊獲取驗證碼按鈕,發(fā)送請求給后端,按鈕失效,并且開始倒計時60秒；在此期間,用戶無法再次點擊按鈕,即使用戶刷新頁面,倒計時依然存在,直到倒計時完畢,按鈕恢復,感興趣的小伙伴跟著小編一起來看看吧2024-10-10
我們開發(fā)后臺管理系統(tǒng)過程中，會由不同的人操作系統(tǒng)，有admin（管理員）、superAdmin(超管)，及各種運營、財務人員。為了區(qū)別這些人員，會給不同的人分配不一樣的角色來展示不同的菜單，這就必須要通過動態(tài)路由來實現(xiàn)。下面就來介紹vue實現(xiàn)動態(tài)路由,需要的朋友可參考一下2021-10-10
這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細的內(nèi)容戒殺，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了Vue 解決路由過渡動畫抖動問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了通過html文件來使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
Vue3實現(xiàn)動態(tài)切換Menu的示例代碼
本文介紹了在Vue3項目中使用頂部導航欄和側(cè)邊欄,通過頂部導航控制側(cè)邊欄的生成,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
今天小編就為大家分享一篇vue初始化動畫加載的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家介紹了Vue.js中安裝一個路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12