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

时间：2022-04-28 06:03:32

一. 运行环境：

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

二. 异常现象：

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

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

ios系统微信浏览器、safari浏览器中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;

注意:

1.页面顶部的元素不要使用固定定位，如头部导航栏可以改为绝对定位，这样ios中就不会脱离文档流了;

2.对于处于屏幕底部展示的一些需要固定位置的元素则可以使用固定定位fixed;

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

相关文章