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:０，再用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例子

 

<template>
  <el-container>
    <el-aside :width="asideWidth">
      <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="default-scrollbar__view">
        <div class="demo">
          aside
        </div>
      </el-scrollbar>
    </el-aside>
    <el-container>
      <el-header class="clear">
        <div class="collapse-btn" @click.prevent="changeCollapse">
          <i class="fas fa-bars" :class="{ rotate90: isCollapse }"></i>
        </div>
      </el-header>
      <el-main>
        <el-scrollbar class="default-scrollbar" wrap-class="default-scrollbar__wrap" view-class="p20-scrollbar__view">
          <div class="main">
            main
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.collapse-btn {
  float: left;
  font-size: 24px;
  cursor: pointer;
}
.rotate90 {
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.demo {
  width: 100px;
  height: 1024px;
  background: #0f0;
}
.main {
  width: 300px;
  height: 1024px;
  background: #00f;
}
</style>

 

最終效果圖

 

 

圖中是chrome瀏覽器的展示效果。main的滾動條是已經到滾動到底的。

轉自：https://www.jianshu.com/p/b371db8fe66a