element ui的滾動條的使用

2022-07-06 18:39:13 字數 500 閱讀 4262

如何使用element ui 自帶的滾動條:

在需要滾動條的容器外層:

需要滾動條的容器// 這個容器需要限定高度哦:如height: 100%;如height:calc(100% - 60px);等

全域性樣式:(如果只需要y軸的滾動條)
.el-scrollbar__wrap 

.el-scrollbar__bar.is-horizontal

注意:直接像上方這樣寫的話,element的下拉框底部會消失一部分(因為下拉框也用來這個滾動條元件),所以要留意一下,我是給彈框加了滾動條,所以這樣寫了。總之給樣式限定乙個範圍,或者單獨調整下拉框的樣式 。

.el-dialog__body>.el-scrollbar .el-scrollbar__wrap 

.el-dialog__body>.el-scrollbar .el-scrollbar__bar.is-horizontal

elementUI 滾動條元件

elementui 中有乙個隱藏元件,用來修改滾動條的樣式 1.元件名稱 2.修改預設樣式 最好在前面加上 class名 id名,用來區別 page component scroll el scrollbar wrap 一種情況用於高度固定 blabla.一種情況用於高度100 自適應 123 樣式...

Element UI 中被隱藏的滾動條

element ui 官網中有用到自定義的滾動條元件,但是發布的所有版本中都不曾提及,個中原因我們不得而知,不過我們還是可以拿過來引用到自己的專案中。使用的時候,放在標籤內即可 如 div style height 100 el scrollbar class m scroll style heig...

使用elementUI滾動條之橫向滾動

用過elementui元件應該會知道它內建乙個滾動效果,官網對此元件沒有相關文件,也是細心發現的。將會出現滾動的內容放到上述標籤內就可以了。這裡要簡單的設定一下,將標籤的height設為100 讀者檢視效果的時候,會出現乙個橫向的滾動條,如果你不想要橫向的滾動條,使用下面css屬性設定就可以只顯示豎...