關于element-ui的隱藏組件el-scrollbar的使用
更新時間：2019年05月29日 11:06:33 作者：gorkys
這篇文章主要介紹了關于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
雖然在官方文檔中沒有給出這個組件，但是在源碼中是有的。所以我們可以直接使用：
<el-scrollbar></el-scrollbar>
但是我們需要微調一下樣式，兩種情況的演示代碼如下：
已知內容高度
<div style='height:800px'>
<el-scrollbar class='page-component__scroll'></el-scrollbar>
<div>
<style>
.page-component__scroll{
height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
overflow-x: auto;
}
<style>
高度由內容撐開
<html>
<body>
<div style='height:100%'>
<el-scrollbar class='page-component__scroll'></el-scrollbar>
<div>
</body>
</html>
<style>
html,body{
height:100%
overflow:hidden; /*有效防止在頁面進行手動刷新時顯示內置滾動條*/
}
.page-component__scroll{
height: 100%;
}
.page-component__scroll .el-scrollbar__wrap {
overflow-x: auto;
}
<style>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue+element 多個相同的select不允許重復選擇問題
這篇文章主要介紹了vue+element 多個相同的select不允許重復選擇問題，具有很好的參考價值，希望對大家有所幫助。2022-07-07
這篇文章主要為大家詳細介紹了vue使用echarts實現(xiàn)地圖的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家詳細介紹了vue綜合組件間的通信，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue從一個頁面跳轉到另一個頁面并攜帶參數的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題解決辦法
這篇文章主要給大家介紹了關于vue3+ts+vite打包后靜態(tài)資源404無法加載js和css問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結果操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue CLI2升級至Vue CLI3的方法步驟,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue框架TypeScript裝飾器使用指南小結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
本篇文章主要介紹了vue下跨域設置的相關介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08