关于el-scrollbar滚动条初始化不显示的问题及解决_vue.js_

el-scrollbar滚动条初始化不显示

当使用el-scrollbar的时候，比如你的数据列表是后端获取的，这时候，初始化的时候，因为数据还没有获取到，导致里面的内容没有撑开，所以滚动条是不显示的，但是可以正常滚动,见下图

所以解决办法是在获取到列表的时候，调用一下update方法

查看源码的时候，因为scrollBar有一个update方法，所以调用这个方法可以解决

... // 异步获取列表之后 this.nextTick(() => { //解决滚动条初始化消失的问题 this.$refs.scrollDiv.update() }) 

el-scrollbar:Element UI隐藏组件

滚动条初始化消失的问题

注意事项：

1.el-scrollbar的父层要有固定高度

2.el-scrollbar的高度要设成100%

3.如果出现横滚动条，添加overflow-x:hidden;

问题分析

通过阅读源码，scrollbar组件暴露了 native, wrapStyle, wrapClass, viewClass, viewStyle, noresize, tag 这7个 props属性

props: {     native: Boolean,  // 是否使用本地，设为true则不会启用element-ui自定义的滚动条     wrapStyle: {},  // 包裹层自定义样式     wrapClass: {},  // 包裹层自定义样式类     viewClass: {},  // 可滚动部分自定义样式类     viewStyle: {},  // 可滚动部分自定义样式     noresize: Boolean, // 如果 container 尺寸不会发生变化，最好设置它可以优化性能     tag: {  // 生成的标签类型，默认使用 `div`标签包裹       type: String,       default: 'div'     } }

代码示例

setTimeout(() => {    this.$refs.scrollDiv.update()  }, 0)

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！