同时设置min-height和max-height后el-scrollbar滚动监听失效？

记录一下憨憨操作，排查+看源码花了一个小时，还以为是el-scrollbar组件本身监听有问题，还跑去看element-ui的源码了。

使用el-scrollbar组件出错

原本好好的简单的分类列表，要求是这样的：

由于使用的是element-ui又自带了el-scrollbar那么寻思一个div然后内嵌一个el-scrollbar在嵌入一个行内块元素不就完成了么。

<!-- 在template中 -->
<div class='box'>
	<el-scrollbar>
		<div class='box-item' v-for='item in list'>xxx</div>
	</el-scrollbar>
</div>
<!-- 在style中 （采用了stylus）-->
.box{
    
     
	width: 1280px; 
	height: 50px;
	line-height: 50px;
	text-align: start;
	white-space: nowrap;
	.box-item{
    
    
		display: inline-block;
		padding: 0 10px;
		margin-left: 10px;
		font-size: 14px;
	}
}
/* 滚动条样式 */
/deep/ .el-scrollbar{
    
    
  width: 100%;
  height: 100%;
}
/deep/.el-scrollbar__wrap {
    
    
  overflow-x: hidden;
}
.el-scrollbar__view{
    
    
  width: 100%;
  height: 100%;
}
/deep/.el-scrollbar__thumb {
    
    
  background: #ddd;
}

最终确实效果就是上图所示，美滋滋的。过一段时间后，有人说这样子不行，不能横向滚动，要改，改成纵向滚动，而且还要显示超过两行才滚动，像下面的样子。

思考了一番，既然横向滚动不行，那首先要设置white-space为wrap（由于列表项的长度不一，没有统一设置每个列表项的长度，而是让他自己折行处理），要显示两行但是有时候数据只够一行那就需要设置min-height保证至少有一行，max-height保证至多两行，超过两行就会溢出。
那就处理一下css咯

.box{
    
     
	width: 1280px; 
	min-height: 50px;
	max-height: 100px;
	line-height: 50px;
	text-align: start;
	white-space: nowrap;
	.box-item{
    
    
		display: inline-block;
		padding: 0 10px;
		margin-left: 10px;
		font-size: 14px;
	}
}
/* 滚动条样式 */
/deep/ .el-scrollbar{
    
    
  width: 100%;
  min-height: 50px;
  max-height: 100px;
}
/deep/.el-scrollbar__wrap {
    
    
  overflow-x: hidden;
}
.el-scrollbar__view{
    
    
  width: 100%;
  min-height: 50px;
  max-height: 100px;
}
/deep/.el-scrollbar__thumb {
    
    
  background: #ddd;
}

这样子就没问题了。
但是意外发生了，改的时候没有这样子改，直接将.el-scrollbar__wrap设置多了overflow-y: hidden这就导致了el-scrollbar滚动监听失效了，后来强行通过绑定监听，先绑定鼠标的移入移出判断是否焦点在组件上，然后在此基础上绑定监听鼠标滚动事件通过this.$refs[‘scrollbar’].wrap.scrollTop属性模拟移动滚动条。

// 添加监听
addElScrollbarListener() {
    
    
  this.$refs['scrollbar'].wrap.addEventListener('mouseenter',this.handlerScrollEnter);
  this.$refs['scrollbar'].wrap.addEventListener('mouseleave',this.handlerScrollLeave);
},
// 移除监听
removeElScrollbarListener() {
    
    
  this.$refs['scrollbar'].wrap.removeEventListener('mouseenter',this.handlerScrollEnter);
  this.$refs['scrollbar'].wrap.removeEventListener('mouseleave',this.handlerScrollLeave);
},
// 处理滚动
handlerScroller(e) {
    
    
  if (e.wheelDelta > 0) {
    
    
    if (top < 0) {
    
    
      return;
    } else {
    
    
      this.top -= 10;
      this.$refs['scrollbar'].wrap.scrollTop = this.top;
    }
  } else {
    
    
    this.top += 10;
    this.$refs['scrollbar'].wrap.scrollTop = this.top;
  }
},
// 处理添加滚动函数
handlerScrollEnter() {
    
    
  this.$refs['scrollbar'].wrap.addEventListener('mousewheel',this.handlerScroller);
},
// 
handlerScrollLeave() {
    
    
  this.top = 0;
  this.$refs['scrollbar'].wrap.removeEventListener('mousewheel',this.handlerScroller);
},

但实际上显然是不用这样子的。
最后使用el-scrollbar注意事项：

1. el-scrollbar的父层要有固定高度

2. el-scrollbar的高度要设成100%

3. 如果出现横滚动条，添加overflow-x:hidden