html 禁止页面回弹,flex禁止ios微信浏览器回弹机制

问题描述：由于微信游览器存在回弹机制，在html body下拉滚动的时候会把整个页面下拉出现由XXX提供字眼

问题复现：

解决思路：把整个html或者body用flex固定在浏览器的可视区域范围内，内容区域滚动的话需要使用滚动插件，在这里我用的是mui的滚动组件，如果使用overflow: auto是不会滚动的

代码：

css样式

html {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

body {

height: 100%;

}

.scrollBox {

position: absolute;

top: 50px;

bottom: 50px;

left: 0;

width: 100px;

overflow: hidden;

}

html结构

Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3
Item 1
Item 2
Item 3

js初始化滚动组件

mui('.mui-scroll-wrapper').scroll({

deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006

indicators:false, //是否显示滚动条

});

实现效果

小瑕疵是：从顶部向下滑动停留一下会出现底部空白，前提是有滚动区域，在ios12.1.4测试会出现，在较低版本又不会。

html 禁止页面回弹,flex禁止ios微信浏览器回弹机制相关推荐

IOS微信浏览器返回事件popstate监听
问题描述: 通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微 ...
popstate android4.3,IOS微信浏览器返回事件popstate监听会立即执行一次
页面跳转从a->b->b1->c,然后从c返回到b再到a.(监听popstate) IOS版的微信,是会立即触法popstate事件,导致直接从C页面跳转到A页面解决办法::: v ...
解决ios微信浏览器时间不兼容的问题
解决ios微信浏览器时间格式不兼容的问题由于ios在微信浏览器中无法识别"YYYY-MM-DD HH:MM:SS"格式的数据,所以在ios中页面将时间格式转换为"YYY ...
vue在微信里面的兼容问题_Vue在 iOS 微信浏览器下不能播放
问题的本质以上定位到问题大概花了我半小时时间,但是我并没有找到问题的根本原因,于是我翻阅了 Vue.js 2.5 的 release log,由于很长就不列了.Vue.js 每次升级主要分成 2 大 ...
【前端】IOS微信浏览器点击右上角遮罩实现
前言现在有一个需求,通过公众号或者链接,下载app应用,大家都知道,安卓和ios下载对应的版本都不一样.并且,ios 微信浏览器不支持应用下载,需要实现一个遮罩功能,提示用户通过浏览器下载,效果如下 ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
ios微信浏览器App下载链接怎样跳转到苹果App Store
通过微信分享链接下载App的情况很常见(写得简单一点) Android 选择跳转至腾讯应用宝,这个做起来很容易,只要我们把应用上传至腾讯应用宝变可以通过链接轻松下载,例如: return &qu ...
微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...
我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...
IOS微信浏览器返回事件监听问题
业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页采取方法:采用onpopstate事件监听url改变,从而跳转到主页遇到的问题:安卓上测试没问题:苹果手机 ...

html 禁止页面回弹,flex禁止ios微信浏览器回弹机制

html 禁止页面回弹,flex禁止ios微信浏览器回弹机制相关推荐

最新文章

热门文章