51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1803|回复: 2
打印 上一主题 下一主题

[前端]解决iframe框架中的scrolling属性在手机端无法拖动的问题

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2017-7-14 14:23:06 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 啦啦啦啦哈 于 2017-7-14 14:24 编辑

【转】一个前端开发中经常遇到的问题就是,在界面无法进行自适应缩放的时候,我们需要将scrolling值设置为1或者auto或者yes,这样的。但是开发者会遇到一个问题,就是这个属性在电脑模拟手机浏览器核心的时候,是可以拖动的,但是真正我们用手机访问的时候,就无法拖动这个框架,造成在手机版被嵌套网页无法完全显示的问题。
当遇到这种问题的时候,可能是开发人员的失误,也比较棘手,那么这里给大家分享一种解决办法:
在iframe框架增加一层,其中样式中加入触屏识别属性。
-webkit-overflow-scrolling:touch; overflow: scroll;
如果内部嵌套是网页,则可以直接  <div style="-webkit-overflow-scrolling:touch; overflow: scroll; "> <---中间这里填框架部分---!></div>
如果遇到自己嵌套的不是网页,那么就需要通过js添加监控事件:

  1. var toScrollFrame = function(iFrame, mask) {
  2.                     if (!navigator.userAgent.match(/iPad|iPhone/i))
  3.                         return false;
  4.                     //do nothing if not iOS devie
  5.                     var mouseY = 0;
  6.                     var mouseX = 0;
  7.                     jQuery(iFrame).ready(function() {//wait for iFrame to load
  8.                         //remeber initial drag motition
  9.                         jQuery(iFrame).contents()[0].body.addEventListener('touchstart', function(e) {
  10.                             mouseY = e.targetTouches[0].pageY;
  11.                             mouseX = e.targetTouches[0].pageX;
  12.                         });
  13.                         //update scroll position based on initial drag position
  14.                         jQuery(iFrame).contents()[0].body.addEventListener('touchmove', function(e) {
  15.                             e.preventDefault();
  16.                             //prevent whole page dragging
  17.                             var box = jQuery(mask);
  18.                             box.scrollLeft(box.scrollLeft() + mouseX - e.targetTouches[0].pageX);
  19.                             box.scrollTop(box.scrollTop() + mouseY - e.targetTouches[0].pageY);
  20.                             //mouseX and mouseY don't need periodic updating, because the current position
  21.                             //of the mouse relative to th iFrame changes as the mask scrolls it.
  22.                         });
  23.                     });
  24.                     return true;
  25.                 };
  26.                 toScrollFrame('.myFrame', '.myMask');</font>
复制代码
然后在对应的div中加上 id="scrollee",这样就彻底解决了电脑可以拖动框架内的内容而手机无法拖动的问题了。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏
回复

使用道具 举报

该用户从未签到

2#
发表于 2017-7-14 15:21:41 | 只看该作者
来支持一下
回复 支持 反对

使用道具 举报

本版积分规则

关闭

站长推荐上一条 /1 下一条

小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

GMT+8, 2024-11-15 06:27 , Processed in 0.067269 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2024 Comsenz Inc.

快速回复 返回顶部 返回列表