It took an hour to check and look at the source code. I thought it was a problem with the monitoring of the el-scrollbar component itself, so I went to look at the source code of element-ui.
使用el-scrollbar组件出错
Originally a good and simple classification list, the requirements are as follows:
Since the element-ui is used and the el-scrollbar comes with it, then thinking about a div and embedding an el-scrollbar and embedding an inline block element is not complete.
<!-- 在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;
}
The final effect is indeed as shown in the picture above, which is very flattering. After a period of time, some people said that this is not okay, that horizontal scrolling is not possible, and that it needs to be changed to vertical scrolling, and it is necessary to display more than two lines before scrolling, as shown below.
After thinking about it, since horizontal scrolling doesn’t work, first set the white-space to wrap (due to the different lengths of the list items, the length of each list item is not uniformly set, but let him wrap the line by himself), to display Two lines, but sometimes the data is only enough for one line, so you need to set min-height to ensure at least one line, max-height to ensure at most two lines, and overflow if more than two lines.
Then deal with css slightly
.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;
}
That's fine.
But an accident happened. When I changed it, I didn’t change it like this. Directly 将.el-scrollbar__wrap设置多了overflow-y: hidden这就导致了el-scrollbar滚动监听失效了, I forced it to listen through binding. I first bound the mouse to move in and out to judge whether the focus is on the component, and then on this basis, I bound to monitor the mouse scroll event through this. The $refs['scrollbar'].wrap.scrollTop property simulates moving a scrollbar.
// 添加监听
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);
},
But in fact, it obviously doesn't need to be like this.
Finally, use el-scrollbar notes:
-
The parent layer of el-scrollbar should have a fixed height
-
The height of el-scrollbar should be set to 100%
-
If a horizontal scroll bar appears, add overflow-x:hidden