移动端踩坑之滚动穿透

问题描述

用了日期控件(https://github.com/foxrunsoftware/DatePicker),
每次控件打开,滚动选择日期,页面主体的滚动条也还能滚动。(安卓正常,只有ios和windows chrome)

解决办法

日期控件源码修改:

  • touchmove 事件中调用 preventDefault,将 EventTargetbody 改为日期控件的dom。
  • 每次日期控件显示的时候 body:{overlow:hidden} ,隐藏的时候 body:{overflow:auto}

因为我的日期控件就在页面顶部,所以不需要记录页面的滚动位置。
这样设置之后,ios和windows chrome都能够正常工作了。

bug fixed!

网上的比较全面的解决办法