在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动。
我觉得这个问题用的是下面这几行代码:
var $body = $('body'),
dialogIsInView = !1,//当前是不是对话框
lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动
$contentContainer = $('#content-container');//内容容器
//阻止Window滚动
function stopWindowScroll() {
dialogIsInView = true;
//禁止页面滚动
lastContentContainerScrollTop = $body.scrollTop();
$contentContainer.addClass('overflow-hidden').css({
'height': $window.height(),
'margin-top': -lastContentContainerScrollTop
});
}
//恢复Window滚动
function revertWindowScroll() {
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。