vue合家福实例(2):使用element-ui el-scrollbar

element-ui是提供了el-scrollbar组件的,但是在文档中没有介绍它的使用方法。使用它不复杂,但是还是有几个注意点。
el-scrollbar本身没有height样式。我觉得这个组件应该是不知道它需要多高。如在一个DIV中,可能这个DIV是100PX高度,那它的hieght就是100px;如果是包含在el-main中,el-main的高度是会根据不同的显示器而高度也不相同。所以,它的高度应该是100%;随父元素的高度,还有一种可能,父元素是display: flex。在样式表中增加如下样式,根据不同的父元素选择不一样的样式:

.default-scrollbar {
  width: 100%;
  height: 100%;
}
.flex-scrollbar {
  width: auto;
  height: auto;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

el-scrollbar的内一层元素el-scrollbar__wrap的样式是overflow: scroll;这样就造成,x方向会显示一个横向滚动条。

想要去掉它,el-scrollbar有个属性“wrap-class”,可以用这个属性增加一个样式。我们只是要去掉这个横向滚动条。

.el-scrollbar__wrap.default-scrollbar__wrap {
  overflow-x: auto;
}

以下是el-scrollbar接受的属性:

 

props: {
    native: Boolean,
    wrapStyle: {},
    wrapClass: {},
    viewClass: {},
    viewStyle: {},
    noresize: Boolean, // 如果 container 尺寸不会发生变化,最好设置它可以优化性能
    tag: {
      type: String,
      default: 'div'
    }
  }

可以根据属性再做一些定制
我再加了一个padding: 20px的view-class,这样,在el-main中,使得滚动条贴着右边,而不是默认的被el-main压进内部20px。又要使内容默认填充20px。把el-main的样式padding:0,再用padding20的view填充回去。换掉el-main本身浏览器的滚动条。

.el-scrollbar__view.p20-scrollbar__view {
  padding: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

最终样式表:

.el-main {
  width: 100%;
  height: 100%;
  padding: 0;
}
.el-main.default {
  height: auto;
  padding: 20px;
}
.default-scrollbar {
  width: 100%;
  height: 100%;
}
.flex-scrollbar {
  width: auto;
  height: auto;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.el-scrollbar__wrap.default-scrollbar__wrap {
  overflow-x: auto;
}
.el-scrollbar__view.default-scrollbar__view {}
.el-scrollbar__view.p20-scrollbar__view {
  padding: 20px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
}

使用el-scrollbar例子

 



 

最终效果图

 

vue合家福实例(2):使用element-ui el-scrollbar_第1张图片

 

vue合家福实例(2):使用element-ui el-scrollbar_第2张图片

图中是chrome浏览器的展示效果。main的滚动条是已经到滚动到底的。

转自:https://www.jianshu.com/p/b371db8fe66a

你可能感兴趣的:(JavaScript)