解决移动端页面滑动穿透问题
来源:互联网 发布:python机器人编程书籍 编辑:程序博客网 时间:2024/06/06 03:04
前几天遇到移动端页面穿透问题相信很多人也遇到过相应的情况 这个问题特别顽固 电脑端用谷歌移动界面测试没有问题 但是安卓 ios 还是会有问题 而且安卓 和 ios 下面两种放法 支持还不一样导致这个问题弄了很久
内容有点多请详细阅读!!!!
就像这个情况 滑动答案的时候 答案到了底部继续滑动 题干的页面也会跟着滑动 为了解决这个问题 也上网找了很多相关问题 但是都没有解决
网上好多说用阻止默认事件 但是加上这个属性 会让本身也滑动不了 所以这个就放弃
然后用了另一种方法 就是滑动答案的时候 让题干部分 fixed 如下面的代码
我会将上面页面说成上层 穿透下面的页面说成下层 记住方便阅读
记住要用touchstart 用touchmove 和end 还会出现穿透的问题 在开始的时候直接将题干定位fiexed
subjectiveList 是上层的页面 这个里面的body是我的下层页面是body所以这么写 你需要根据你自己的情况对应着改一下
这段代码就是滑动上层页面的时候将下层页面fixed 将top赋值下层页面当前的scrolltop的值 为了保存你之前滑动的位置
然后在你下层的定位fixed的dom节点上添加一个属性保存它的scrolltop的值
因为你滑动下层的时候需要把原来的scrolltop还原
这段是滑动下层页面的时候讲下层定位以及scrolltop还原
到这基本就解决了 然而并没有!!!!!!
这个方法在安卓上完美解决但是 在ios上会出现各种神奇的bug 滑动页面乱跳 会让你怀疑人生 然后就有了第二种方法的探寻之路
第二种方法思路 我们上层页面滑动到底部或者顶部的时候 才会影响到 下层的页面 所以就有了想法 如果滑动到最底部 就阻止上层页面的默认事件 下层就不会动了 但是有了阻止默认事件上层页面也划不动
这个方法都是操作上层页面 不用去理会下层页面
touchstart不用去看这个是我解决别的问题
在touchmove的时候看是否为最上端或者最底端
scrolltop==0的时候是最上端
阻止默认事件 因为阻止默认事件之后就滑动不了 所以滑动结束之后给scrolltop赋值了个1 为了下次滑动时候还能继续滑动 而且赋值个1 不会影响使用 看不出来
$(".subjectiveList").scrollTop() + $(".subjectiveList").height() >= $(".subjectiveList")[0].scrollHeight 这个是判断是不是最下端然后将scrolltop减1 也是为了防止下次滑不动
这个方法ios完美运行 但是安卓滑动上层的时候下层会闪动!!!!!!
所以综合以上两种方法 总结了一个两种结合的方法
先判断手机的机型是什么 然后进入对应的代码
纯原创第一次写如果解决你的问题请给个赞
- 解决移动端页面滑动穿透问题
- 移动页面【点击穿透】问题
- 解决移动端可恨的滚动穿透问题
- 移动端 滚动穿透问题
- 移动端弹出穿透问题(弹出层弹出后body还能滑动)
- 关于移动端h5页面不能滑动问题的解决办法
- 移动端禁止页面滑动
- H5移动页面的touch事件与点击穿透问题
- 移动端滚动穿透问题完美解决方案
- Zepto tap 穿透bug、解决移动端点击穿透问题
- 移动端页面touch会"穿透"的解决方案
- 解决ViewPager.serCurrentItem滑动页面不顺滑问题
- tab穿透 移动端解决的七种方案
- 移动端页面滑动轮播
- 移动端H5页面,上下滑动翻页
- 移动端300ms点击延迟和点击穿透问题
- 移动页面滚动穿透解决方案(荐)
- 移动页面点击穿透问题解决方案
- Leetcode之Minimum Path Sum 问题
- How Creeate status Bar in MFC
- ansible安装和基本使用方法
- 栈的压入,弹出序列
- 数据库多表查询之 where & INNER JOIN
- 解决移动端页面滑动穿透问题
- Google Play Music无法加载DRM歌曲
- 8、Spring Session-API文档
- 根据文件下载链接地址获取文件的大小
- SpringBoot 学习记录(七)- 连接Mysql数据库
- android app
- HBase学习笔记——基于HBase的日志系统的性能优化
- 插值算法
- windows+svn+redmine实现代码评审