微信浏览器弹出框滑动时页面跟着滑动的实现代码(兼容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端),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
ios微信浏览器返回不刷新问题完美解决方法
开始用的表单提交,返回参数就丢失,换成url跳转,popstate监听 (注释部分)ios10测试始终有问题,继续搜,最后用pageshow,pagehide完美解决(另外说一句:珍爱生命,远离微信和ios) var wxback = { init :function(){ //隐藏微信分享按钮等 document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() { WeixinJSBridge.call('hid
-
JS如何设置iOS中微信浏览器的title
说到web前端,浏览器差异是不可回避的问题,这次在项目就遇到下面的问题: 微信导航栏的内容是直接拿的项目中title来设置的.但是现在做的项目是一个单页应用,整个页面只会在第一次完全刷新,后面只会局部刷新,所以只能在页面刷新的时候通过js动态修改title.开始我们使用的做法如下: document.title = "微信导航栏想要显示的内容"; $("title").text("微信导航栏想要显示的内容"); document.getEleme
-
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仿微信进度弹出框的实现方法
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实现弹出框效果
弹出框在网站页面中是必不可少的一部分,今天借助我们平台给大家分享使用js实现简单的弹出框效果,本文写不好,还请见谅! 首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分. <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q
-
关于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仿微信网络加载弹出框的具体代码,供大家参考,具体内容如下 没有饿了么的动画效果好看,但是,特别适用,拿来就用! 看一下效果图 图片素材 好了,其实很简单,就是一个自定义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页面弹出框实现文件上传
如图所示,点击新增,弹出如图的弹出框,点击取消不保存页面信息,点击确定保存页面信息 在前台页面添加一个标签,任何都可以 <div class="btn btn-default" id="divadd">新增</div> 写弹出框页面 <div id="popup_overlay" style="display: none; position: fixed; top: 0px; left: 0px; righ
随机推荐
- asp下删除Access数词库中的空记录的sql语句
- bash scp command not found的解决方法
- 详解基于angular-cli配置代理解决跨域请求问题
- AngularJS入门示例之Hello World详解
- 如何快速上手Vuex
- 用“本地安全策略”保护系统安全
- JavaScript解析任意形式的json树型结构展示
- 基于Three.js插件制作360度全景图
- 深入理解JavaScript系列(39):设计模式之适配器模式详解
- 关于统计数字问题的算法
- 关于javaScript注册click事件传递参数的不成功问题
- php实现QQ空间获取当前用户的用户名并生成图片
- 百度地图API之百度地图退拽标记点获取经纬度的实现代码
- php自动注册登录验证机制实现代码
- onbeforeunload与onunload事件异同点总结
- 将ASP记录集输出成n列的表格形式显示的方法
- Mybatis中的延迟加载案例解析
- 阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
- Android中实现Runnable接口简单例子
- Android 网络图片查看显示的实现方法