移动端开发常见问题汇总

一. 滚动穿透问题

移动端页面中有弹层时，滑动弹层，底部的body也会随之滚动

解决办法：

①如果弹层内的内容不需要滚动，则为弹层增加阻止滚动的事件；

@touchmove.stop.prevent

②如果弹窗内存在滚动区域，方法①就不再适用，如果单纯将body的position设置为fixed，则关闭弹窗时body的滚动位置就会丢失，所以通过js在获取滚动位置，弹层关闭时，再为其增加滚动位置则完美解决滚动穿透问题，具体代码如下：

// 打开弹层
open(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
}

// 关闭弹层
close(){
    let body = document.body;
    body.style.position = '';
    let top = body.style.top;
    document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
    body.style.top = '';

}

二. 滚动不流畅

-webkit-overflow-scrolling: touch;

三. 点击事件延迟300ms

移动端点击事件存在300ms的延迟，造成这个问题的原因是移动端存在双击缩放，当第一次点击后会延迟300ms来看是否存在下一次点击，没有则执行点击事件。

解决：

1、在页面内通过增加meta标签禁止缩放功能。

<meta name="viewport" content="width=device-width user-scalable= 'no'">

2、通过引入fastclick第三方js库解决 (原理：会在监听到touch事件后立即执行dom的click事件，并在300ms之后阻止click事件)

引入js文件
FastClick.attach(document.body);

四. ios橡皮筋效果

当滚动到页面或者html元素的最上或者最下部的时候，在页面或者元素回到顶部/底部之前(即你松开手指或者鼠标之前)，会短暂的看到空白区域的出现。

解决：

// 阻止ios弹性滚动事件
document.body.addEventListener('touchmove', function(e) {
    e.preventDefault();
}, { passive: false });