同时设置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注意事项：

el-scrollbar的父层要有固定高度
el-scrollbar的高度要设成100%
如果出现横滚动条，添加overflow-x:hidden

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

android 代码设置键盘适应_Android自适应软键盘的Dialog以及监听软键盘弹起
最近项目中遇到一个需求:新手引导.跟一般的新手引导没有什么太大区别,思路都是搞一个带阴影的遮罩层,然后在上边儿给一些提示性的文字,由于需求中有些特殊的地方,所以我用了一个全屏的dialog(而且,di ...
Android 集成高德地图——当前定位，添加图标，画路线，设置显示中心位置，比例，地图刷新位置监听，判断GPS开启，去打开GPS
/*** 判断定位服务是否开启** @param* @return true 表示开启*/ public static boolean isLocationEnabled(Context contex ...
Java日记_17.9.01——点击按钮后，键盘监听失效的原因与解决办法
最近在自学JAVA,听了前辈的安利在做自己的小画板,然后悲剧就发生了,同时添加按钮和键盘监听之后,就产生了如题的问题,一直觉得是自己监听事件注册的不对,改了一天,然后终于找到了原因,真的巨坑啊我觉得q ...
滴滴夜莺配置M3DB后transfer正常启动，但是端口监听失效，怎么解决？
改M3DB后,transfer启动卡在这里: {"level":"info","ts":1615712676.6585393,"m ...
vue 监听页面滚动事件：触发animate.min.css动画特效
一.问题答疑: 1. animate.css 如何在vue项目中引入?或引用? 2. 如何监听滚动事件,触发animate.class动画播放? vue 监听滚轮滚动事件,for循环 ,动态id,代码 ...
RecycleView 分割线设置及监听滚动状态
一.RecycleView 分割线 ListView中的分割线可以通过属性divider和dividerHeight分别设置颜色值/图片及分割线高度.而RecycleView并没有提供这两个属性设置分 ...
个人免签支付APP监听和云端监听免挂机的设置说明
个人免签支付系统需要监听个人支付宝微信的收款消息,来实现实时回调通知的效果,那么监听端也可以分为自行用APP挂机监听和云端监听免挂机两种方式. 然后监控端的状态可以用该接口查询获取: 请求地址:htt ...
SQL Server2008（数据库）安装后，1433端口没监听问题
windows10操作系统的电脑安装完SQL Server2008后发现1433端口并没有监听! 需要监听到1433端口的场景其一:本地计算机安装了sql server数据库,本地有程序启动时需要连接 ...
html 设置min height,HTML min-height用法总结
min-height 属性设置元素的最低高度,该属性值会对元素的高度设置一个最低限制.因此,元素可以比指定值高,但不能比其矮.不允许指定负值. 下面我们就对min-height的用法进行汇总: 为什么 ...

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

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

最新文章

热门文章