欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容Android和IOS端)

程序员文章站 2024-02-28 12:23:52
 在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动。 我觉得这个问题用的是下面这几行代码: var $body = $('body'...

 在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动。

我觉得这个问题用的是下面这几行代码:

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。

以上所述是小编给大家介绍的微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容android和ios端),希望对大家有所帮助