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

啦啦啦啦哈

【转】一个前端开发中经常遇到的问题就是，在界面无法进行自适应缩放的时候，我们需要将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"，这样就彻底解决了电脑可以拖动框架内的内容而手机无法拖动的问题了。

巴黎的灯光下

来支持一下

jingzizx

支持！