ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

一. 运行环境：

iphone所有机型的qq浏览器，safari浏览器，微信内置浏览器（qq浏览器内核）等。

二. 异常现象：

1. 大幅度上下滑动h5页面，然后停止滑动，有时候会影响到页面滚动，如局部滚动条；

2. 大幅度上下滑动h5页面，页面中的悬浮层，如头部，底部菜单之类需要固定在指定位置的层不会随着挣个界面滑动；如果对前端的定位方式不太熟练的话，甚至会出现悬浮层的框架与内容相分离的现象。

三. 解决方法：

1.屏蔽滑动手势——具体解决方法有待探索研究,慎用

直接屏蔽浏览器的滑动手势——干脆直接，省时省力，免除一切ios中部分浏览器默认滑动手势带来的不正常

示例代码：

window.addEventListener('touchstart',function(e){e.preventDefault();});

window.addEventListener(‘touchmove’,function(e){e.preventDefault();});

个人感觉如果没有特殊要求的话，直接使用这种方法就好了，两行代码就能免除后患。

注意：这种方法直接屏蔽了页面的滚动方式，具体解决方法有待探索研究,慎用。

2.动态修改悬浮层定位方式

动态修改悬浮层的定位方式——保留浏览器中默认的上拉下滑手势，又解决了悬浮层脱离整体页面的问题

示例代码：

// angular的写法，仅供参考

angular.element(document).on('scroll', function () {

var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);

var window_height = $(window).height() + $(window).scrollTop();

if (scrollHeight <= window_height) {

// 页面停止滑动，滚动容器恢复默认定位

$(ele).css({'position': 'absolute' })

} else {

// 页面滚动，滚动容器设置固定定位，随着微信内置浏览器一块儿滑动

$(ele).css({'position': 'static' })

}

})

 

如果一定要保留浏览器默认的滑动手势的话，那就只能用这种方式了，在滑动页面的时候，动态将悬浮层的定位方式修改为相对定位，滑动的时候触发浏览器自身的滑动手势的时候，悬浮层就会相对于整个H5界面定位，这样就不会出现分离的现象了；

对于习惯了ios上拉下滑整个界面的用户来说，这种做法的确会好一点，但是需要多所有需要随着界面整体滑动的悬浮层都有单独处理，这个就麻烦点了。

3. 合理使用css样式：

将所有使用fixed定位的元素都改为absolute定位，就可以解决问题了，已经证明该方法有效

  position:absolute;  

tips:在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动，所以要保证悬浮层在需要滚动的层的外围。相对来说，个人感觉还是这种方法比较靠谱。