Web移动端开发技巧总结
在我们日常的开发中，成为全栈开发，已经是一个前端程序员不得不修行的一门功课了。刚刚脱离了IE678的束缚，现如今又必须兼容移动端。移动端又分为Android和IOS,主要以谷歌浏览器、Safari、火狐浏览器为主，还包括国内的各种套壳浏览器，那就不可胜数了，UC浏览器、百度、小米、华为、360浏览器…
1.禁止蒙层底部页面跟随滚动
这个问题出现的场景主要是，在页面的弹出层中进行鼠标滚动，弹出层下方的滚动条会跟随滚动。这又分为两种情况，一种是弹出层本身没有滚动条，这种情况比较简单，只需要在弹出层出现时将底下的body设置为overflow:hidden即可; 另一种情况是弹出层本身自带滚动条，在弹出层出现的时候，除了设置底下的body外，为了更好的兼容性，还需要做移动端Safari的特别处理。经过测试，将页面固定在视窗（positon:fixed）,然后记录滚动位置，关闭弹出层之后在恢复其滚动位置，我觉得这种方式更加的通用和简洁。
1 | let bodyEl = document.body |
参考文章：
1.禁止蒙层底部页面跟随滚动：https://segmentfault.com/a/1190000012313337
2.弹出弹窗后，如何禁止底层的body滚动，适用于超长的页面(2018.11更新)：https://blog.csdn.net/github_36487770/article/details/78971761
3.弹出层完美禁止页面滚动：https://codepen.io/zhaojun/post/forbidscroll
4.web移动端浮层滚动阻止window窗体滚动JS/CSS处理：https://www.zhangxinxu.com/wordpress/2016/12/web-mobile-scroll-prevent-window-js-css/
1.禁止蒙层底部页面跟随滚动：https://segmentfault.com/a/1190000012313337
2.弹出弹窗后，如何禁止底层的body滚动，适用于超长的页面(2018.11更新)：https://blog.csdn.net/github_36487770/article/details/78971761
3.弹出层完美禁止页面滚动：https://codepen.io/zhaojun/post/forbidscroll
4.web移动端浮层滚动阻止window窗体滚动JS/CSS处理：https://www.zhangxinxu.com/wordpress/2016/12/web-mobile-scroll-prevent-window-js-css/
