iframe内容在IOS webview内无法滚动

最新推荐文章于 2022-03-11 15:36:29 发布
原创 最新推荐文章于 2022-03-11 15:36:29 发布 · 827 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在Iframe外层div中实现平滑滚动的方法，通过添加特定的CSS样式属性，如-webkit-overflow-scrolling:touch; 和 overflow:auto;，以提升用户体验。

在iframe外层div添加样式属性

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

iOS唤起键盘页面被顶上去且无法自动回退带来的问题及解决方案
Justicky
01-18 1万+
一、问题描述： 问题1：iOS唤起软键盘，将页面顶出屏外，且无法自动回退到正常位置 详细描述：在开发H5页面时，会遇到这样的问题，在iPhone访问有提交按钮fixed在底部页面，且页面中有input框等可录入信息的元素时，点击input框唤起键盘，输入信息，这时候页面会被顶出屏外，且在点击键盘的完成按钮收起键盘时，页面不会回到原来正常的位置。 问题2：点击fixed在底部的提交按钮无反应 ...
ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)
01-20
最近做微信公众号页面，因为入口不同，需要把公共页面抽取出来，然后根据不同的值，传递给后台不同的入口。刚开始用iframe页面嵌套（第一次尝试使用），但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位，具体表现为，当嵌套的子页面的高度大于父页面的高度，且子页面中有触发弹框事件时，这时，如果子页面高度远远大于父页面高度，就会出现弹框找不到的情况，其实可能是在视口以下，弹框的位置只是相对于子页面来定位，并没有相对于视口定位。 尝试了好多种方法，均不理想，而安卓系统则表现良好，于是想到，iOS系统可直接做页面跳转，而安卓系统则正常使用iframe（如果安卓系统直接做页面跳转，会有问题，故使
网页在IOS webview上面页面拉不动的情况
weixin_34023982的博客
06-15 1410
为什么80%的码农都做不了架构师？>>> ...
解决iPad上的iframe无法触摸滚动
程序员写的技术 FAQ 和杂文
01-29 8333
解决iPad上的iframe无法触摸滚动 日期：2012-08-02    阅读：141   分类：HTML~CSS 不知道大家发现没有，在iPad上的iframe是没有滚动条的，用手指触摸滑动也没用；div在ipad上设置了overflow:auto|scroll之后也没有滚动条，但用手滑动是可以滚动的，因此iframe的问题就迫切需要解决。 于是网上也搜索了下说是需要给i
解决 iframe 在 ios 上不能滚动的问题
weixin_30755709的博客
04-13 550
HTML代码在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们: <div class="scroll-wrapper"> <iframe src=""></iframe> </div> 这个DIV将作为支持内部滚动的基础容器。 CSS 代码要让IFRAME支持...
iframe内容在ios移动端无法滚动
Program Apes
03-08 1409
在iframe外面套一层div，并且给改div高度，并且加上样式，注意iframe同样要给定高度。
iframe在ios滑动不顺畅
MaRain
08-06 3301
前提最近使用了iframe做页面，发现手机端页面的效果非常不好。iOS滑动不是非常的畅通在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:<div class="scroll-wrapper"> <iframe src=""></iframe> </div> .scroll-wrapper { -webkit-overflow-scrolling: to
精选资源
3D WebView for Windows and macOS Web Browser 4.5.unitypackage
08-15
修复了在某些情况下iframe中滚动不正确的问题。 更新了弹出窗口，使H.264视频编解码器能够将MPEG-LA的名称更改为Via LA，因为该组织更改了名称。 Windows：更新了3D WebView的Chromium进程可执行文件，使“Vuplex...
ios iFrame 兼容问题
最新发布
07-17
在 iOS WebView 或 `<iframe>` 中，`overflow` 属性有时无法正常生效，导致内容溢出或滚动失效 [^3]。 **解决方案：** - 包裹 `<iframe>` 的内容并限制其容器大小，确保滚动行为可控。 ```javascript var UA = ...
方案 1：正确使用滚动容器（推荐）无法跟随页面滑动 还是固定在页面底部
07-04
-- 正确结构：所有内容在统一滚动容器内 --> <!-- 顶部内容 --> 可滚动头部 <!-- 中间内容 --> 滚动区域... <!-- Web-view 作为普通滚动元素 --> <view class="webview-container"> :src="url" ...
IOS端 html网页内iframe的嵌套网页无法向下滚动
Drumsticks的博客
06-17 1508
IOS端 html网页内iframe的嵌套网页无法向下滚动 问题描述：最近接的网站项目一个页面需要选择城市，于是就做了一个iframe嵌套，在安卓上没有任何问题，但是在ios上就不能向下滚动 问题原因： 原因吧，估计还是ios不兼容iframe吧 解决方法： 1：用一个div包含iframe 2：给这个div设置样式 div { -webkit-overflow-scrolling: touch;...
解决IOS iframe不滚动问题
zhengxiuchen86的博客
07-01 249
解决IOS iframe不滚动问题
iframe在ios上不能滚动问题解决
weixin_34281477的博客
03-18 385
同这篇文章一样，用到了-webkit-overflow-scrolling: touch;属性。主要解决方案是在iframe外层添加一个div，然后设置-webkit-overflow-scrolling属性。 例如： <div class="content-iframe-wrapper"> <iframe frameborder="0" class="content-...
vue页面在iphone手机上竖屏不能滑动，横屏可以滑动
little_kid_pea的博客
10-17 2848
解决办法： 在页面css中设置min-width为一个超出一般苹果手机的值
IOS苹果手机上 iframe 滚动失效条问题，局部滚动开启弹性滚动！ios手机页面overflow scroll滑动很卡的问题...
weixin_34353714的博客
10-20 268
html：bo<div class="scroll-wrapper"> <iframe src=""></iframe> </div> 样式：.scroll-wrapper { -webkit-overflow-scrolling: touch; /*决定代码*/ overflow-y: scroll; /...
移动端iframe跳转第三方应用出现无法滑动问题
weixin_44748107的博客
03-11 5111
问题 为了实现跨平台兼容，我们的项目用的是capacitor+vue框架，实际上就是在webview上用iframe实现页面的跳转功能，ios在跳转到第三方页面时，出现了无法滑动的情况。 由于iframe在ios上宽度撑开屏幕问题，设置了iframe的scrolling为no，因此才会出现无法滑动问题。 解决办法 由于不能直接改iframe，于是我们选择迂回救国，通过调用内置浏览器访问第三方页面。 capacitor内置浏览器open() 通过调用调用capacitor的内置浏览器打开第三方页面，但是该浏
解决ios系统下iframe滚动失效问题。（附带 kindeditor.js等插件ios滚动失效处理）
cinoway的博客
05-21 889
背景：最近因早期项目中反映出很多页面在ipad以及苹果手机中出现无法滑动的问题，所以开始去排查代码中的问题，经过重重测试最后定位到iframe的问题。 处理方式：通过查找才发现在ios下iframe的滚动兼容确实存在问题，网上搜集到处理方式是：在iframe的外层嵌套一个div,设置div滑动： iframe的高度可以通过js进行动态计算赋值。设置样式-webkit-overflow-s...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值