el-scrollbar 滚动条不显示,elementui scrollbar

　　本文主要介绍了元素滚动条组件el-scrollbar的使用方法的详细说明，通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

　　官网的文章里没有介绍滚动条的使用，但是官方的滚动条源代码有滚动条的样式代码。

　　风格效果

使用方法

　　将el-scrollbar组件引入页面

　　el-scrollbar style=height: 100%

　　！-由滚动条包装的内容-

　　Class=容器占位符/div

　　/El-滚动条

　　El-scrollbar组件有以下模块：

　　El-scrollbar:需要指定高度el-scrollbar__wrap:包裹滚动区El-scroll bar _ _ bar is-horizontal:horizontal scroll bar El-scroll bar _ _ bar is-vertical:如果您不需要水平滚动条(不带作用域),则需要垂直滚动条

　　样式lang=scss

　　/*元素滚动条组件隐藏水平滚动条*/。侧栏包装器。el滚动条__wrap {

　　溢出-x:隐藏；

　　}。is-水平{

　　显示：无；

　　}

　　/风格

　　方法二：如果在Layout.vue组件中使用了滚动条组件，请不要在Layout.vue中引入隐藏水平滚动条的css样式，这样会影响下拉框选择框等后续滚动条样式。

　　解决方法：创建一个css文件，在Layout.vue中单独介绍css文件，记得在Layout.vue中添加滚动条组件的父类，以免影响后期的样式。

　　//common.css

　　/*元素滚动条组件隐藏水平滚动条*/。侧栏包装器。el滚动条__wrap {

　　溢出-x:隐藏；

　　}

　　Layout.vue

　　style lang=scss 范围

　　@导入./assets/CSS/common . CSS ；

　　.

　　/风格

　　关于元素滚动条的详细使用，这篇文章就讲到这里。有关元素滚动条的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。