ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
2017-07-27 00:20
901 查看
一. 运行环境:
iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等。
二. 异常现象:
1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局部滚动条;
2. 大幅度上下滑动h5页面,页面中的悬浮层,如头部,底部菜单之类需要固定在指定位置的层不会随着挣个界面滑动;如果对前端的定位方式不太熟练的话,甚至会出现悬浮层的框架与内容相分离的现象。
三. 解决方法:
1.屏蔽滑动手势——具体解决方法有待探索研究,慎用
直接屏蔽浏览器的滑动手势——干脆直接,省时省力,免除一切ios中部分浏览器默认滑动手势带来的不正常
示例代码:
个人感觉如果没有特殊要求的话,直接使用这种方法就好了,两行代码就能免除后患。
注意:这种方法直接屏蔽了页面的滚动方式,具体解决方法有待探索研究,慎用。
2.动态修改悬浮层定位方式
动态修改悬浮层的定位方式——保留浏览器中默认的上拉下滑手势,又解决了悬浮层脱离整体页面的问题
示例代码:
如果一定要保留浏览器默认的滑动手势的话,那就只能用这种方式了,在滑动页面的时候,动态将悬浮层的定位方式修改为相对定位,滑动的时候触发浏览器自身的滑动手势的时候,悬浮层就会相对于整个H5界面定位,这样就不会出现分离的现象了;
对于习惯了ios上拉下滑整个界面的用户来说,这种做法的确会好一点,但是需要多所有需要随着界面整体滑动的悬浮层都有单独处理,这个就麻烦点了。
3. 合理使用css样式:
将所有使用fixed定位的元素都改为absolute定位,就可以解决问题了,已经证明该方法有效
position:absolute;
tips:在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动,所以要保证悬浮层在需要滚动的层的外围。相对来说,个人感觉还是这种方法比较靠谱。
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则会随滚动条移动,所以要保证悬浮层在需要滚动的层的外围。相对来说,个人感觉还是这种方法比较靠谱。
相关文章推荐
- ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
- iOS开发之解决APP界面卡死Bug,一级页面进行系统右滑返回,导致整个app卡死
- H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法
- iOS 同一页面加载上百张图片,迅速滑动时导致内存暴涨程序崩溃的参考解决方法
- 窗口缩放导致页面排版错乱的解决方法
- iOS系统头文件被修改导致报错的解决方法
- 使用ifame嵌入其他系统,导致session丢失的解决方法
- JavaScript页面刷新与弹出窗口问题解决方法
- JavaScript页面刷新与弹出窗口问题解决方法
- JavaScript页面刷新与弹出窗口问题解决方法
- JavaScript页面刷新与弹出窗口问题解决方法
- XP系统的 搜索 功能失效;IE点击链接没反应,不会弹出窗口的解决方法
- defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
- defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
- winform 在mdi窗口重绘界面时,mdi挡住主窗体,导致鼠标拖动缩放窗体大小失效的解决方法随笔
- ASP.NET response.write alert后 导致页面布局改变的解决方法
- 用ASP.NET做项目,本本上的系统是XP,网上下载了IIS6,安装完后出现HTTP500问题,解决之.接着出现了浏览页面时跳出登陆框让输用户名及密码,GOOGLE了一下,原来是权限不够,解决方法
- 对于用户上传不规划Html而导致页面布局错乱的一简单解决方法
- javascript页面刷新与弹出窗口问题解决方法
- Freebsd中fstab修改错误导致文件系统只读的解决方法