element ui 的滚动条,Element UI 文档中没有被提到的滚动条

element ui 的滚动条,Element UI 文档中被提到的滚动条

Element UI 官网中有用到自定义的滚动条组件，但是发布的所有版本中都不曾提及，个中原因我们不得而知，不过我们还是可以拿过来引用到自己的项目中。

 使用的时候，

放在 标签内即可

如：

  
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333
	
1111111111111
	
2222222222222
	
3333333333333

发现底部出现横向滚动条，

 问题大概在于 

上的 height: 100% 与 margin-bottom 同时显示

 直接用 overflow-x:hidden  隐藏：

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

PS：通过阅读源码，可以看到暴露的几个属性

props: {
    native: Boolean,    // 使用原生滚动条
    wrapStyle: {},      // 包裹层
    wrapClass: {},
    viewClass: {},      // 内容层
    viewStyle: {},
    noresize: Boolean,  // 如果 container 尺寸不会发生变化，最好设置它可以优化性能
    tag: {              // 编译后生成的标签，默认 `div`
      type: String,
      default: 'div'
    }
  },

所以，前面的代码可以插入这些属性

完整代码

    
    
    
    
    

    
    
    

    
    
    
    
    
    

    
        .jjy-scroll {
            width: 500px;
            height: 300px;
            border: #c1c1c1 1px solid;
            background-color: antiquewhite;
            overflow-x: hidden;
            overflow-y: hidden;
        }
        .jjy-scroll .el-scrollbar__wrap{
            overflow-x: hidden;
        }
    



    
        搜索 



        
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
            
1111111111111
            
2222222222222
            
3333333333333
        
    
    
        var jjyBoxObj = new Vue({
            el: '#jjyBox',
            data: {
            },
            created: function () {

            },
            methods: {
            }
        });
    

效果

最后附上官方github地址：

https://github.com/ElemeFE/element/blob/dev/packages/scrollbar/src/main.js

element/main.js at dev · ElemeFE/element · GitHub

文章核心内容摘录：

Element UI 中被隐藏的滚动条 – osc_khbto5ni的个人空间 – OSCHINA – 中文开源技术交流社区

https://www.cnblogs.com/_error/p/10484703.html