iframe fixed兼容ios的滚动代码解决失效问题

代码笔记       35.5KB      2018-08-29 08:26:29    


iframe在安卓、ios中滚动,头部、底部也能固定。主要解决iframe在苹果手机iphone(ios)中滚动时头部与底部不能固定及滚动时出现卡顿的情况。本Demo演示iframe中固定父页面头部、底部,子页面正常滚动。兼容PC和移动端,尤其是苹果ios系统(如iphone手机)

设置main元素高度
 
$('main').css('height', $(window).height() - $('header').get(0).offsetHeight);



设置子页面main区域css样式:
 
main {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    overflow-y:scroll;
    -webkit-overflow-scrolling:touch;
    -webkit-transform:translate3d(0,0,0);
    //...其它样式
}

 

效果预览 下载地址 打赏