快捷導(dǎo)航

vue+elementUI中的滾動(dòng)條el-scrollbar使用及說(shuō)明

更新時(shí)間：2026年02月10日 09:09:09 作者：是日前端

文章介紹了如何在Vue和ElementUI中使用`el-scrollbar`組件來(lái)替換原生滾動(dòng)條,并提供了一個(gè)示例代碼,同時(shí),文章分享了隱藏橫向滾動(dòng)條的經(jīng)驗(yàn),通過(guò)調(diào)整CSS樣式解決了原生滾動(dòng)條顯示的問(wèn)題

vue+elementUI的滾動(dòng)條el-scrollbar

由于需要使用滾動(dòng)條，原生滾動(dòng)條長(zhǎng)的太丑，查到了elementUI中的滾動(dòng)條

el-scrollbar，使用簡(jiǎn)潔方便

樣式如下：

使用方法

如下所示：

外部的div必須給固定高度才行

<!-- 外部div -->
<div style="height: 650px; display: flex" class="cab" >
      <el-scrollbar style="height:100%">
	      <!-- 內(nèi)部div -->
	      <div></div>
      </el-scrollbar>
</div>

一般根據(jù)需要可以隱藏橫向滾動(dòng)條，網(wǎng)上查的是這個(gè)，但是我用起來(lái)沒(méi)生效

.el-scrollbar__wrap{
  overflow-x: hidden;
}

后來(lái)自己f12倒騰出來(lái)了，我之前只用了下面這個(gè)，我自己這可以，結(jié)果別人那原生的橫向滾動(dòng)條也跑出來(lái)了

.cab .is-horizontal{
  display: none;
}

后來(lái)又倒騰，終于隱藏了

.cab .is-horizontal{
  display: none;
}

.cab .el-scrollbar__wrap {
  overflow-x: hidden;
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目main.js使用方法詳細(xì)介紹
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目main.js使用方法的相關(guān)資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-09-09
Vue3實(shí)現(xiàn)獲取驗(yàn)證碼按鈕倒計(jì)時(shí)效果
這篇文章主要介紹了Vue3實(shí)現(xiàn)獲取驗(yàn)證碼按鈕倒計(jì)時(shí)效果,用戶點(diǎn)擊獲取驗(yàn)證碼按鈕,發(fā)送請(qǐng)求給后端,按鈕失效,并且開始倒計(jì)時(shí)60秒；在此期間,用戶無(wú)法再次點(diǎn)擊按鈕,即使用戶刷新頁(yè)面,倒計(jì)時(shí)依然存在,直到倒計(jì)時(shí)完畢,按鈕恢復(fù),感興趣的小伙伴跟著小編一起來(lái)看看吧
2024-10-10
vue實(shí)現(xiàn)動(dòng)態(tài)路由詳細(xì)
我們開發(fā)后臺(tái)管理系統(tǒng)過(guò)程中，會(huì)由不同的人操作系統(tǒng)，有admin（管理員）、superAdmin(超管)，及各種運(yùn)營(yíng)、財(cái)務(wù)人員。為了區(qū)別這些人員，會(huì)給不同的人分配不一樣的角色來(lái)展示不同的菜單，這就必須要通過(guò)動(dòng)態(tài)路由來(lái)實(shí)現(xiàn)。下面就來(lái)介紹vue實(shí)現(xiàn)動(dòng)態(tài)路由,需要的朋友可參考一下
2021-10-10
Vue中$router與?$route的區(qū)別詳解
這篇文章主要介紹了Vue中$router與?$route的區(qū)別詳解，文章圍繞主題展開詳細(xì)的內(nèi)容戒殺，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-09-09
Vue 解決路由過(guò)渡動(dòng)畫抖動(dòng)問(wèn)題(實(shí)例詳解)
這篇文章主要介紹了Vue 解決路由過(guò)渡動(dòng)畫抖動(dòng)問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-01-01
為什么vue中不建議使用空字符串作為className
本文主要介紹了為什么vue中不建議使用空字符串作為className，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
通過(guò)html文件來(lái)使用Vue的單文件組件形式詳解
這篇文章主要介紹了通過(guò)html文件來(lái)使用Vue的單文件組件形式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue3實(shí)現(xiàn)動(dòng)態(tài)切換Menu的示例代碼
本文介紹了在Vue3項(xiàng)目中使用頂部導(dǎo)航欄和側(cè)邊欄,通過(guò)頂部導(dǎo)航控制側(cè)邊欄的生成,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-11-11
vue初始化動(dòng)畫加載的實(shí)例
今天小編就為大家分享一篇vue初始化動(dòng)畫加載的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue.js中安裝一個(gè)路由器demo
這篇文章主要為大家介紹了Vue.js中安裝一個(gè)路由器demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12