解决iOS与pad里ifram无法滑动问题

今天遇到一个问题,在手机内嵌ifram,在iOS和pad里只会显示第一屏的内容,下面的内容加载出来了但是全部在下面,无法滑动展示,
所以特意找了一下方法(经测可用)

在iframe的父容器添加如下css样式:

-webkit-overflow-scrolling:touch;
overflow:auto;

对于安卓低于4.0版本的浏览器不支持overflow的问题,可使用如下js解决(对uc无效):

function touchScroll(id) {
                var el = document.getElementByIdx_x(id);
                var scrollStartPos = 0;
                document.getElementByIdx_x(id).addEventListener("touchstart", function (event) {
                    scrollStartPos = this.scrollTop + event.touches[0].pageY;
                    event.preventDefault();
                }, false);
                document.getElementByIdx_x(id).addEventListener("touchmove", function (event) {
                    this.scrollTop = scrollStartPos - event.touches[0].pageY;
                    event.preventDefault();
                }, false);
        }
时间: 2024-11-08 13:17:09

解决iOS与pad里ifram无法滑动问题的相关文章

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

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

解决ViewPage中嵌套有ListView或者滑动手势等造成滑动的冲突

public class ViewPagerCompat extends ViewPager { //mViewTouchMode表示ViewPager是否全权控制滑动事件,默认为false,即不控制 private boolean mViewTouchMode = false; public ViewPagerCompat(Context context, AttributeSet attrs) { super(context, attrs); } public void setViewTou

解决IOS safari在input focus弹出输入法时不支持position fixed的问题

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

解决iOS程序UI主线程和定时器相互阻塞的问题

我的问题是这样,我的页面上有一个UIScrollView和一个定时器用来记录当前考试模式下的剩余时间,问题出现了:当我滑动滚动试图时,定时器的方法便不在运行(即被UI主线程阻塞).google一下找到了解决办法:将定时器放在非主线程中执行将更新UI的操作放到主线程,这样UI主线程和定时器就能互不干扰的相互工作了. 在另一个项目中,还解决了一个问题:手机验证码,获取按钮,点击获取后,会开始倒计时一段时间,按钮不可点,按钮上的文字不断变化. 获取验证码 120秒后重新获取 119秒后重新获取 以下是

如何解决IOS 动画中 Autolayout 与View Transforms的冲突

IOS 的动画放大与缩小,并非按照找它的中心点放大和缩小,而是左上角 .我分析了下原来是Autolayout 与View Transforms的冲突造成的. - (void) addSubviewWithZoomInAnimation:(UIView*)view duration:(float)secs option:(UIViewAnimationOptions)option { // first reduce the view to 1/100th of its original dimen

移动端上传照片 预览+draw on Canvas demo(解决iOS等设备照片旋转90度的bug)

背景: 本人的一个移动端H5项目,需求如下: 手机相册选取或拍摄照片后在页面上预览 然后绘制在canvas画布上. 这里,我们先看一个demo(http://jsfiddle.net/q3011893/83qfqpk8/embedded/) 操作步骤: 1.点击选择文件,拍摄一张照片,此时"预览:"文字下会显示你刚才拍摄的照片: 2.再点击"draw on Canvas",该按钮下的画布会绘制你刚才拍摄的照片. 正常的结果: 正文: 让input file支持拍照+

解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

iOS 去除JSON里的转义符

iOS 去除JSON里的转义符 今天帮朋友弄这个问题,json返回全都是带'\'的,于是要去掉这个反斜杠,但是OC里面的'\'是转义符,不能直接用@"\"之类的表示,一顿搜索之后,找到了OC对转义字符的表示方法,如下: \a - Sound alert\b - 退格\f - Form feed\n - 换行\r - 回车\t - 水平制表符\v - 垂直制表符\\ - 反斜杠\" - 双引号\' - 单引号 那么知道如何表示'\',去掉这个就是一个遍历的事了.代码如下: NS

解决iOS 使用腾讯信鸽推送sdk编译链接不能通过的问题

默认demo,在64bit模拟器上会link不过: target 中的 architectures 的valid architectrues里面,去掉 arm64, build active architecture only: 改为no 解决iOS 使用腾讯信鸽推送sdk编译链接不能通过的问题