在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动。
我觉得这个问题用的是下面这几行代码:
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。
本文介绍了一种在微信浏览器中解决弹出框滑动导致页面内容跟随滑动的技术方案。通过使用特定的JavaScript代码片段来实现禁止页面滚动,并在关闭弹窗时恢复页面滚动状态。
3904

被折叠的 条评论
为什么被折叠?



