el-slider
这是el-ui里面的一个滑块组件,当时产品测试提出一个需求,因为是触屏端,然后滑动这个el-slider时,可能会把它的容器也进行带着滑动。因为容器本身是可以进行sroll的,但是滑动el-slider,我们只能让el-slider滑动,可能由于手指触摸的时候,相对于把下面的容器也按到了。
- 解决方法
- 给el-slider添加事件
slidr 对象
slider.addEventListener('touchstart',()=>{
让box 容器 变成 scroll-hidden
})
slider.addEventListener('touchend',()=>{
让box 容器 变回 scroll-auto
})
关于触屏端,可以左右滑动
这也是最近解决的一个bug。
其实很简单,只需要给外面的盒子添加overflow-x:hidden
就可以了。实际需求看自己应该加在哪个盒子里面。
触屏端texearea 触发了滚动事件
需求是这样的,一个texearea,在触屏端,绑定了touchstart事件,调用一个函数,然后当我们手指滚动的时候,是不会调用这个函数的。
这个坑就在于touchstart,每次我们手指触屏上去就会触发这个事件,所以我们滚动的时候之前,就会先调用这个函数。 解决方法很简单,就是通过它的touch事件的其他监听。touchend 或者touchmove
方法一 通过判断它是否是由手指滚动触发发送。
let isMove = false
text.addEventListener('touchstart', (event) => {
console.log('输入了内容');
isMove = false;
});
text.addEventListener('touchmove',()=>{
isMove = true
})
text.addEventListener('touchend',()=>{
if(!isMove) {
hello()
}
})
方法二 既然你是手指触屏滚动,那么这滚动肯定是有一段时间的,我们可以通过拿取这个段时间来进行对比,判断是否手指触屏滚动了。 方法三 既然滚动那么就会有滚动距离,我们可以通过scrollTop的差值,判断当前是否进行滚动了。滚动前的和滚动后的差比如小于多少,我们就假定它滚动,不触发函数。