解决移动端页面滑动穿透问题

 前几天遇到移动端页面穿透问题相信很多人也遇到过相应的情况    这个问题特别顽固  电脑端用谷歌移动界面测试没有问题 但是安卓 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完美运行 但是安卓滑动上层的时候下层会闪动！！！！！！

所以综合以上两种方法 总结了一个两种结合的方法

先判断手机的机型是什么 然后进入对应的代码  

纯原创第一次写如果解决你的问题请给个赞