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

 更新时间:2016年11月24日 17:04:12   作者:SennTyou  
小编在做微信开发的时候遇到微信浏览器弹出框滑动时页面跟着滑动的效果,下面把关键代码分享给大家,需要的朋友参考下

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

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

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端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 使用Flutter开发的抖音国际版实例代码详解

    使用Flutter开发的抖音国际版实例代码详解

    这篇文章主要介绍了使用Flutter开发的抖音国际版,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • 项目发布Debug和Release版的区别详解

    项目发布Debug和Release版的区别详解

    这篇文章主要为大家详细介绍了项目发布Debug和Release版的区别,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • Android开发基础简化Toast调用方法详解

    Android开发基础简化Toast调用方法详解

    这篇文章主要为大家介绍了Android开发基础简化Toast调用方法的相关资料,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Android实现从缓存中读取图片与异步加载功能类

    Android实现从缓存中读取图片与异步加载功能类

    这篇文章主要介绍了Android实现从缓存中读取图片与异步加载功能类,涉及Android针对缓存的操作及图片异步加载相关实现技巧,需要的朋友可以参考下
    2016-08-08
  • Android APP与媒体存储服务的交互

    Android APP与媒体存储服务的交互

    本文介绍如何在 Android 中,开发者的 APP 如何使用媒体存储服务(包含MediaScanner、MediaProvider以及媒体信息解析等部分),包括如何把 APP 新增或修改的文件更新到媒体数据库、如何在多媒体应用中隐藏 APP 产生的文件、如何监听媒体数据库的变化等等。
    2013-10-10
  • Android 文件数据存储实例详解

    Android 文件数据存储实例详解

    这篇文章主要介绍了Android 文件数据存储实例详解的相关资料,这里附有实例代码,帮助大家学习理解,需要的朋友可以参考下
    2016-12-12
  • Android实现分享微信好友及出现闪退的解决办法

    Android实现分享微信好友及出现闪退的解决办法

    这篇文章主要介绍了Android实现分享微信好友及出现闪退的解决办法的相关资料,需要的朋友可以参考下
    2016-03-03
  • Android自定义ViewGroup实现竖向引导界面

    Android自定义ViewGroup实现竖向引导界面

    这篇文章主要为大家详细介绍了Andoird自定义ViewGroup实现竖向引导界面,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • Kotlin编程循环控制示例详解

    Kotlin编程循环控制示例详解

    这篇文章主要为大家介绍了Kotlin编程循环控制示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Android 自定义开源库 EasyView实现详解

    Android 自定义开源库 EasyView实现详解

    这篇文章主要为大家介绍了Android自定义开源库EasyView实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04

最新评论