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

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

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

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

赞 (0)

相关推荐

  • JS如何设置iOS中微信浏览器的title

    说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题: 微信导航栏的内容是直接拿的项目中title来设置的.但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title.开始我们使用的做法如下: document.title = "微信导航栏想要显示的内容"; $("title").text("微信导航栏想要显示的内容"); document.getEleme

  • ios微信浏览器返回不刷新问题完美解决方法

    开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { init :function(){ //隐藏微信分享按钮等 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hid

  • iOS微信浏览器回退不刷新实例(监听浏览器回退事件)

    iOS在微信浏览器回退是不重新加载页面的,有些时候是需要重新加载的,所以需要监听回退事件 $(function(){ pushHistory(); }); function pushHistory(){ window.addEventListener("popstate", function(e){ alert("回退!"); //window.history.back(); //在历史记录中后退,这就像用户点击浏览器的后退按钮一样. //window.histor

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

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • PopupWindow仿微信浮层弹出框效果

    最近公司项目需要实现类似微信的浮层弹出框.研究发现是用PopupWindow实现的.而且可以自定义位置以及出现和退出时的动画,由于太晚了就不实现动画了,需要得同学请自己研究下.由于本人新手其中的不足和缺点请见谅. 代码如下: 首先是定义顶部按钮的main.xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.an

  • Android仿微信进度弹出框的实现方法

    Android仿微信进度弹出框的实现方法

    MainActivity: package com.ruru.dialogproject; import android.app.Activity; import android.os.Bundle; import android.view.View; public class MainActivity extends Activity implements Runnable { LoadingDialog dialog; @Override protected void onCreate(Bu

  • 基于JavaScript实现弹出框效果

    基于JavaScript实现弹出框效果

    弹出框在网站页面中是必不可少的一部分,今天借助我们平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅! 首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q

  • 关于Bootstrap弹出框无法调用问题的解决办法

    关于Bootstrap弹出框无法调用问题的解决办法

    问题描述 写项目中使用到了前端框架bootstrap,提供的功能很强大! bootstrap学习 然而在用bootstrap提供的弹出框组件时,弹出框怎么也弹不出! 按理说应该这样: 官方给出的样例是这样写的: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 弹出框(Popover)插件</title> <link href="http://libs.baidu.com/bo

  • python selenium 弹出框处理的实现

    弹出框有两种:页面弹出框(可定位元素能操作).Windows弹出框(不能直接定位) 一.页面弹出框 等待弹出框出现之后,定位弹出框,操作其中元素 如: driver = webdriver.Chrome() driver.get("https://www.baidu.com") driver.maximize_window() #点击百度登录按钮 driver.find_element_by_xpath('//*[@id="u1"]//a[@name="t

  • Android仿淘口令复制弹出框功能(简答版)

    上篇文章给大家介绍了Android实现打开手机淘宝并自动识别淘宝口令弹出商品信息功能,接下来通过本文给大家分享android简单版仿淘口令复制弹出框功能,希望对大家有所帮助! 使用Android系统的粘贴板管理服务及ClipboardManager通过addPrimaryClipChangedListener添加Listener来监听粘贴板的状态,很很简单的一个小功能~ 1.首先创建一个Service在后台运行: Intent intent = new Intent(this,MainServi

  • Android仿微信网络加载弹出框

    Android仿微信网络加载弹出框

    本文实例为大家分享了Android仿微信网络加载弹出框的具体代码,供大家参考,具体内容如下 没有饿了么的动画效果好看,但是,特别适用,拿来就用! 看一下效果图 图片素材 好了,其实很简单,就是一个自定义Dialog的控件而已 1. 自定义view的style样式 <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.L

  • 微信小程序实现底部弹出框封装

    微信小程序实现底部弹出框封装

    本文实例为大家分享了微信小程序底部弹出框封装的具体代码,供大家参考,具体内容如下 <!--index.wxml--> <view>   <button style="margin-top: 300px;" catchtap="changeRange2">点击唤起弹窗222</button>   <!-- 弹框 -->   <dialogA id='dialog' catchtouchmove=&quo

  • jQuery页面弹出框实现文件上传

    jQuery页面弹出框实现文件上传

    如图所示,点击新增,弹出如图的弹出框,点击取消不保存页面信息,点击确定保存页面信息 在前台页面添加一个标签,任何都可以 <div class="btn btn-default" id="divadd">新增</div> 写弹出框页面 <div id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; righ

随机推荐