关于滚动贯穿的解决方案

首先滚动贯穿现象：

当前容器已经滚动到底部或者顶部，无法再滚动，容器会默认选择上层容器进行滚动，可以说滚动贯穿并非是一个bug，只是一种现象

解决办法，尝试了很多种解决办法，最后依然采用js阻止默认事件的方式解决

1：监听当前容器的滚动距离，判断出到了顶部或者底部

2：如果在顶部，还要往上滚动，阻止当前容器的默认事件如果在底部，还要向下滚动，阻止

if(e.changedTouches[0].pageY>pageY&&滚动距离为0){setMoveFlag(true);e.preventDefault()
}
if(e.changedTouches[0].pageY<pageY&&滚动距离到顶部){setMoveFlag(true);e.preventDefault()
}

关于滚动贯穿的解决方案相关推荐

移动端页面滚动穿透问题解决方案
移动端页面滚动穿透问题解决方案参考文章: (1)移动端页面滚动穿透问题解决方案 (2)https://www.cnblogs.com/GeniusLyzh/p/5808446.html 备忘一下.
Vue 滚动事件穿透解决方案
移动端阻止默认事件 <div class="test" @touchmove.prevent></div> PC // 停止页面滚动stopMove() ...
uni-popup滚动无效的解决方案
复现? 在使用uniapp官方的popup组件时,里面嵌套了一个动态流程,可根据高度进行自适应展示,在h5端可正常滚动,在app端失效. 解决方案查询各博客发现,是官方的代码(uni_modules ...
【ElementUI】InfiniteScroll 无限滚动组件在部分浏览器中滚动失效的解决方案
ElementUI 官网 InfiniteScroll 使用:https://element.eleme.cn/#/zh-CN/component/infiniteScroll 首先先叙述一下需求,说 ...
JAVA——JScrollbar 滚动条自动滚动到底端解决方案
解决方案方法一 JTextArea.selectAll(); 方法二 JTextArea.setCaretPosition(JTextArea.getText().length()); 方法三 JS ...
滚动穿透及IOS惯性滚动究极解决方案
封装/utils/popup.js /** 解决滚动穿透* 弹窗打开时,禁用body滚动并记录当前页面滚动距离* 弹窗关闭时,启用body滚动并还原滚动距离* 使用 ==== this.$popup. ...
iframe滚动条在safari中无法滚动的终极解决方案
大家都知道,正常情况下iframe嵌套的页面如果高度超过iframe高度,那么就正常出现滚动条,并且此滚动条是iframe自身的滚动条. 但在ios,safari浏览器下这一切都失效了,或许你百度,研 ...
idea中鼠标滚动失效的解决方案：
页面无法滚动_【前端词典】滚动穿透问题的解决方案
点击上方"前端真好玩",喜欢他就关注他听说,看恺哥的文章会上瘾背景产品有三宝,弹窗,浮层加引导: 设计有三宝,透明,阴影加圆角: 运营有三宝,短信,推送加红包: 程序员有一宝 ...
H5禁止弹窗页面滚动
这篇文章讲解一下,弹窗弹出以后,如何禁止页面滑动的技巧. 如下图所示,在"弹窗"弹出后页面是可以滚动的. 解决方案: 第一步: 在点击弹框的事件中添加: $("body& ...

关于滚动贯穿的解决方案

首先滚动贯穿现象：

关于滚动贯穿的解决方案相关推荐

最新文章

热门文章