终于解决ios上页面滑动拉屏的问题

看了网上很多资料,说是-webkit-overflow-scrolling: touch;这个属性引起的问题。可是这个如果没有加的话,ios上面滑动又会卡顿。

所以最后还是用了这个,一开始没有找到好的办法解决这个问题。然后想借鉴淘宝的,可是好像又看不到什么东西。所以就自己的各种尝试。

终于。。。。。。。。把他给解决了。

因为项目是用vue写的,所以这个滑动的属性一直是加在一个公共的类上面的。

然后昨天尝试的时候,把这个东西放在body上面,结果神奇的发现,居然可以了

body,
html {
    height: 100%;
}
body{
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

纠结了很久的问题,终于解决了

原文地址:https://www.cnblogs.com/chao202426/p/12027576.html

时间: 2024-08-02 22:53:33

终于解决ios上页面滑动拉屏的问题的相关文章

解决ios手机页面overflow scroll滑动很卡的问题

解决ios手机页面overflow scroll滑动很卡的问题 今天在IOS系统上测试 webAPPApp的时候发现使用了position:fixed/absolute时,DIV容器里面下滑动没有像普通页面一样顺畅,手滑到哪就停到哪.感觉很卡一样,而安卓效果正常,算是一个bug.终于在网上找到了一个解决方法. -webkit-overflow-scrolling:touch; 加上去后果然有用,也就是说DIV容器使用的定位属性引起的.当时效果是弹出一个层,body无滚动条,但是弹出层需要可以上下

解决ios双击页面上移问题

做webapp时,ios有个默认双击事件,会缩放页面,并将当前点击的位置居中到屏幕,本来也没什么,但是当页面中有fixed定位的元素时,这时候你就会神奇的发现,fixed元素所见不所得了! 还有就是页面会上移... //解决ios双击页面上移问题 //在项目中测试不紧input/button这些表单控件有这个问题,p,div等也有问题,于是乎就直接在body开刀了 (function() { var agent = navigator.userAgent.toLowerCase(); //检测是

在iOS上增加手势锁屏、解锁功能

在iOS上增加手势锁屏.解锁功能 在一些涉及个人隐私的场景下,尤其是当移动设备包含太多私密信息时,为用户的安全考虑是有必要的. 桌面版的QQ在很多年前就考虑到用户离开电脑后隐私泄露的危险,提供了“离开电脑自动锁定”或者“闲置锁定”等类似功能,具体我也忘了. 而在iPhone版的QQ上,也提供了手势锁的功能.如下图: 我在上一篇博文中简单提到如何根据手指移动画线条,而这里是进一步的版本,仍然只是粗糙原型: 具体的代码实现如下: [cpp]  //  //  ViewController.m  //

解决ios微信页面回退不刷新的问题

在回退后需要刷新的页面加以下js 1 $(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function () { isPageHide = true; }); })

解决VirtualBox 上的XP 蓝屏,自动重复启动

启动时的蓝屏显示错误信息是: STOP 0x000000CE (...) DRIVER_UNLOADED_WITHOUT_CANCELLING_PENDING_OPERATIONS intelppm.sys 步骤如下: 1. 启动进入"带网络连接的安全模式", 2. 在windows安装目录中查找 intelppm.sys , 3. 删除找到的所有 intelppm.sys 文件, 4. 重启计算机.OK 再次开机就没有蓝屏及自动重启现象了.

iOS开发页面滑动返回跟scrollView左右划冲突问题

-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer { // 首先判断otherGestureRecognizer是不是系统pop手势 if ([otherGestureRecognizer.view isKindOfClas

ios禁止页面下拉

document.querySelector('body').addEventListener('touchmove', function(e) {     e.preventDefault(); }) 此类事件是手机touchmove默认事件行为,可以通过js代码禁止默认事件: 原文地址:https://www.cnblogs.com/zhouyx/p/8145182.html

解决IOS微信浏览器底部会出现向前向后返回按钮,返回不刷新的问题

<script type="text/javascript"> //解决IOS返回页面不刷新的问题 var isPageHide = false; window.addEventListener('pageshow', function() { if(isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', function() { isPageHide = true;

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题

解决页面使用overflow: scroll,overflow-y:hidden在iOS上滑动卡顿的问题 div{ width: 100%; overflow-y: hidden; -webkit-overflow-scrolling: touch; } 在使用overflow的的地方加上?-webkit-overflow-scrolling: touch;便可解决页面在ios机器上卡顿的问题. 解决由-webkit-overflow-scrolling: touch 引起的ios滚动条(将滚动