element滚动条设置

el-scrollbar属性

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

水平垂直滚动条

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
<div id="app">
    <div class="d" style="width:150px;height:100px;">
        <el-scrollbar :native="false" wrapStyle="" wrapClass="" viewClass="" viewStyle="" noresize="false" tag="section" style="height:100%">
            <div>
                <p>这里是一些文本这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
                <p>这里是一些文本</p>
            </div>
        <el-scrollbar>
    </div>
</div>
        
<style>
/* 隐藏水平滚动条 不要写在<style scoped></style> */
.el-scrollbar__wrap{
  overflow-x: hidden;
}

/* 出现水平滚动条 */
.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
   white-space: nowrap;
}
    
// 滑块颜色    
.el-scrollbar__thumb{
  background-color: rgba(144,147,153,.7);
}
</style>

其中style中的scoped 表示当前文件渲染css，而滚动条或许是你后面动态加载出来的，所以没生效。

解决方法：

可以如二楼所述另外引入全局生效的css文件；
去掉当前文件的scoped 属性

滚动监听

1.vue页面滚动监听

// 监听是针对window，增加监听后每个页面都会监听，只对某个页面进行监听的话需要在destroyed中将监听移除
mounted() {
	window.addEventListener('scroll', this.getScroll);
},
destroyed(){
	window.removeEventListener('scroll', this.getScroll);
},
methods: {
    // 监听滚动
    getScroll(){
        this.indexNumTop = $("#index_num").offset().top;
        this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (!!document.documentElement.scrollTop &&document.documentElement.scrollTop >= 300){
        	// 设置滚动大于300时的执行内容
        }
    }
}

2.el-scrollbar滚动监听

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style type="text/css">
    .app-main{
      height: 300px;
    }
    .totop {
      position: fixed;
      right: 10px;
      bottom: 20px;
      width: 30px;
      padding: 15px 0;
      border: 1px solid #333;
      text-align: center;
    }
    .content{
      height: 500px;
    }
  </style>
</head>
<body>
  <div id="app">
    <h1>element ui el-scrollbar组件监听滚动返回顶部</h1>

    <el-scrollbar id="main" class="app-main" ref="myScrollbar">
      <div class="content">
        <h3>顶部</h3>
      </div>
      <div class="content">
        <h3>Transfer 穿梭框</h3>
      </div>
      <div class="content">
        <h3>Form 表单</h3>
      </div>
      <div class="content">
        <h3>Table 表格</h3>
      </div>
      <div class="content">
        <h3>Tag 标签</h3>
      </div>
    </el-scrollbar>

    <div class="totop" v-show="visible" @click="totop">回顶部</div>

  </div>
</body>
  <!-- 先引入 Vue -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      },
      mounted() {
        this.handleScroll()
      },
      methods: {
        handleScroll() {
          let _self = this
          let scrollbarEl = this.$refs.myScrollbar.wrap
          scrollbarEl.onscroll = function() {
            if(scrollbarEl.scrollTop > 200) {
              _self.visible = true
            } else {
              _self.visible = false
            }
          }
        },
        totop() {
          this.$refs.myScrollbar.wrap.scrollTop = 0
        }
      }
    })
  </script>
</html>

element界面布局

<template>
  <div>
    <div style="width: 100%;height: 80px;background-color: aqua;position: fixed;z-index: 1;top:0px">

    </div>
    <div class="test">
      <el-scrollbar ref="myScrollbar" style="height: 100%;">
        <div style="height: 1500px;">
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<style>

  .test .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .test .el-scrollbar__thumb{
    background-color: rgba(40, 43, 153, 0.7);
  }
  .test {
    height: calc(100vh - 80px);
    width: 100%;
    margin-top: 80px;

  }
  .el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{
    white-space: nowrap;
  }
</style>

<script>
  export default {
    data() {
    }
  };
</script>