微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)
在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动。
我觉得这个问题用的是下面这几行代码:
var$body=$('body'),
dialogIsInView=!1,//当前是不是对话框
lastContentContainerScrollTop=-1,//用于弹出框禁止内容滚动
$contentContainer=$('#content-container');//内容容器
//阻止Window滚动
functionstopWindowScroll(){
dialogIsInView=true;
//禁止页面滚动
lastContentContainerScrollTop=$body.scrollTop();
$contentContainer.addClass('overflow-hidden').css({
'height':$window.height(),
'margin-top':-lastContentContainerScrollTop
});
}
//恢复Window滚动
functionrevertWindowScroll(){
dialogIsInView=!1;
//恢复页面滚动
$contentContainer.css({
'height':'auto',
'margin-top':0
}).removeClass('overflow-hidden');
$body.scrollTop(lastContentContainerScrollTop);
}
这里有个要求,内容跟元素是id=”content-Container”.
下面给大家说点题外话:
微信浏览器在Android和iOS中的表现形式是不一样的,归根结底是Android端用的QQ浏览器内核X5,IOS端用的苹果开放的浏览器内核webkit。
以上所述是小编给大家介绍的微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短