让iframe在iOS设备手机浏览器上支持滑动滚动-HXC博客
  •  首页
  •  游戏/动漫
  •  日记/生活
  •  时间轴
  •  留言板
  • 
    让iframe在iOS设备手机浏览器上支持滑动滚动
     作者:转  发布时间:2017-08-23 19:40:19  访客:45

    HTML代码


    在使用IFRAME或者其他HTML元素时,你需要使用一个元素(如DIV)来包装他们:

    <div class="scroll-wrapper">   
        <iframe src=""></iframe>   
    </div>

    这个DIV将作为支持内部滚动的基础容器。

    CSS 代码

    要让IFRAME支持滚动,需要一个常用的CSS属性和一个很少人知道的CSS属性(property):

    .scroll-wrapper {   
        -webkit-overflow-scrolling: touch;   
        overflow-y: scroll;   
        /* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */   }   .scroll-wrapper iframe {   
        /* 你自己指定的样式 */   }

    -webkit-overflow-scrolling: touch; 属性值就是专为浏览器中溢出(overflow)时需要滚动的元素设计的。 

    如果没有指定这个属性,当你想滚动iframe时,实际上会导致外层页面的滚动,通过它你就可以对IFRAME的滚动进行控制! 在原作者的博客站点中,使用了下面的CSS:

    .demo-iframe-holder {   
      position: fixed;    
      right: 0;    
      bottom: 0;    
      left: 0;   
      top: 0;   
      -webkit-overflow-scrolling: touch;   
      overflow-y: scroll;   }   
       .demo-iframe-holder iframe {   
      height: 100%;   
      width: 100%;   }


    点评一下

    
    程序:HXC博客v1.0+ 主题:HXC博客前端Funs主题    环境:lamp  后台
    博客平稳运行2年+