微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容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端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Android PopUpWindow使用详解

    Android PopUpWindow使用详解

    PopupWindow与AlertDialog最关键的区别是AlertDialog不能指定显示位置,只能默认显示在屏幕最中间(当然也可以通过设置WindowManager参数来改变位置)。而PopupWindow是可以指定显示位置的,随便哪个位置都可以,更加灵活
    2021-10-10
  • Android仿新浪微博、QQ空间等帖子显示(1)

    Android仿新浪微博、QQ空间等帖子显示(1)

    这篇文章主要为大家详细介绍了Android仿新浪微博、QQ空间等帖子显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Android序列化实现接口Serializable与Parcelable详解

    Android序列化实现接口Serializable与Parcelable详解

    我们使用 Intent 传递数据的时候,putExtra() 所支持的数据类型事有限的,当需要传递自定义对象的时候就需要序列化。Serializable更简单但是会把整个对象进行序列化因此效率比Parcelable低一些
    2022-12-12
  • Android ViewPager2 使用及自定义指示器视图实现

    Android ViewPager2 使用及自定义指示器视图实现

    这篇文章主要为大家介绍了Android ViewPager2 使用及自定义指示器视图实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Android应用启动另外一个apk应用的方法

    Android应用启动另外一个apk应用的方法

    这篇文章主要介绍了Android应用启动另外一个apk应用的方法,涉及Android基于intent的package调用与管理技巧,需要的朋友可以参考下
    2016-02-02
  • Android编程实现TCP客户端的方法

    Android编程实现TCP客户端的方法

    这篇文章主要介绍了Android编程实现TCP客户端的方法,结合实例形式分析了Android实现TCP客户端的原理及数据通信的相关技巧,需要的朋友可以参考下
    2016-04-04
  • Kotlin如何安全访问lateinit变量的实现

    Kotlin如何安全访问lateinit变量的实现

    这篇文章主要介绍了Kotlin如何安全访问lateinit变量的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Android的Service应用程序组件基本编写方法

    Android的Service应用程序组件基本编写方法

    Service是一个android 系统中的应用程序组件,它跟Activity的级别差不多,但是他没有图形化界面,不能自己运行,只能后台运行,Service通常用来处理一些耗时比较长的操作
    2012-12-12
  • Android RecyclerView 数据绑定实例代码

    Android RecyclerView 数据绑定实例代码

    本文主要介绍Android RecyclerView 数据绑定的资料,这里详细说明如何实现 Android RecyclerView的数据绑定,并附示例代码,有需要的小伙伴可以参考下
    2016-09-09
  • Android实现闪屏欢迎界面

    Android实现闪屏欢迎界面

    这篇文章主要介绍了Android实现闪屏欢迎界面的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论