el-scrollbar 横向滚动 监听滚动事件

横向滚动

• 隐藏横向滚动条

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

• 显示横向滚动条

.el-scrollbar__wrap {
   overflow-x: auto;
}
.el-scrollbar__view {
  display: inline-block;
}

• 隐藏浏览器默认滚动条样式

// chrome
::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

监听滚动事件

<el-scrollbar ref="scrollbar">
...
</el-scrollbar>

<script>
  ...
  mounted() {
    this.handleScroll()
  },
  methods: {
    handleScroll() {
      let scrollbarEl = this.$refs.scrollbar.wrap
      scrollbarEl.onscroll = () => {
        const scrollTop = scrollbarEl.scrollTop
      }
    }
  }
</script>