微信浏览器禁止页面下拉查看网址实例详解

微信浏览器禁止页面下拉查看网址实例详解

此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:

$(‘body').on(‘touchmove', function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);

但这样往往会把页面原生的scroll效果也一同去掉了,下面的代码可以完美解决这个问题:

var overscroll = function(el) {
 el.addEventListener('touchstart', function() {
  var top = el.scrollTop
   , totalScroll = el.scrollHeight
   , currentScroll = top + el.offsetHeight;
  //If we're at the top or the bottom of the containers
  //scroll, push up or down one pixel.
  //
  //this prevents the scroll from "passing through" to
  //the body.
  if(top === 0) {
   el.scrollTop = 1;
  } else if(currentScroll === totalScroll) {
   el.scrollTop = top - 1;
  }
 });
 el.addEventListener('touchmove', function(evt) {
  //if the content is actually scrollable, i.e. the content is long enough
  //that scrolling can occur
  if(el.offsetHeight < el.scrollHeight)
   evt._isScroller = true;
 });
}
overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
 //In this case, the default behavior is scrolling the body, which
 //would result in an overflow. Since we don't want that, we preventDefault.
 if(!evt._isScroller) {
  evt.preventDefault();
 }
});

详情见:https://github.com/luster-io/prevent-overscroll/blob/master/index.html

源码下载:http://xiazai.jb51.net/201706/yuanma/preventoverscrollmaster(jb51.net).rar

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-06-25

JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求,那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包等app的返回按钮或者浏览器的上一页或后退按钮的事件呢. 我相信很多朋友像我一样,在百度.搜狗里面搜索很久都没找到方法. 下面就来告诉大家怎样监听的方法: 首先我们要了解浏览器的history. 大家知道在页面中我们可以使用javascript window history,后退到前面页面,但是由于安

JavaScript 监控微信浏览器且自带返回按钮时间

比如现在有一个操作 是 A->B->C->B 在B页面的返回键 第一次返回的是C 如果想直接返回A或者其他地方 则需要触发返回事件 pushHistory(); window.addEventListener("popstate", function(e) { //alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 window.location = 'http://www.baidu.com'; }, false

解决微信浏览器Javascript无法使用window.location.reload()刷新页面

场景是这样子的,页面在初始化时有一个ajax请求,在页面上有一个按钮,点击的时候执行window.location.reload(),正常情况reload()后页面依然会向后台发出请求,但在安卓的微信浏览器中reoad后请求的一直是第一次打开页面时请求的数据.可以理解为请求被缓存了,但没有实测,也不知道是否是缓存. 解决方法是,使用window.location.href="window.location.href+随机数" 代替 window.location.reload().切记

解决微信内置浏览器返回上一页强制刷新问题方法

微信内置浏览器在返回上一页面,且上一页面包含AJAX代码时,页面就会被强制刷新,极度影响用户体验.而我们想要的效果是:返回上一页面时,页面还停留在原来的状态,AJAX获取到的数据还在,滚动条也在原来的位置. BINGO~ 通过HTML5的history API + 缓存可以做到这一点. 执行原理: 1.0.通过history API的 history.pushState或 history.replaceState 保存AJAX状态: 2.0.同时将AJAX获取到的数据缓存起来(可以考虑使用H5的

JavaScript禁止微信浏览器下拉回弹效果

本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果,供大家参考,具体内容如下 方法1: <script type="text/javascript"> var overscroll = function(el){ el.addEventListener('touchstart', function(){ var top = el.scrollTop; var totalScroll = el.scrollHeight; var currentScroll

微信小程序 在Chrome浏览器上运行以及WebStorm的使用

「微信小程序」的开发框架体验起来,还不错--自带了UI框架.但是问题是他的IDE,表现起来相当的糟糕--其实主要是因为,我当时买WebStorm License买了好多年.所以,我觉得他的IDE真不如我这个付费好用. 而且,作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」.微信在「微信小程序」引导着Web开向封闭,我们再也不能愉快地分享我们的代码了. 如果我们放任下去,未来的Web世界令人堪忧. 好了,废话说完了: 文章太长不想看,可以直接看Demo哈哈: GitHu

Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug

先给大家分析下微信浏览器上传图片bug的原因 微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器.具体的环境我也不太了解,但是经过实际多台安卓机型的测试,我采取的方案可以基本确保在安卓机中微信浏览器的成功上传.苹果机型没问题,因为微信的ios客户端使用的是Safari的内核,没有各种坑,且效果最好. 这里给出一个 WebUploader 官方关于移动端适配的 issues 链接.里面提供的方法确实有效,但就是解决的方案并没有很清楚的展示出来,从该issues中

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

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

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

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

PHP判断是手机端还是PC端 PHP判断是否是微信浏览器

本文实例为大家分享了PHP判断的两个实例,一是PHP判断是手机端还是PC端,二是PHP判断是否是微信浏览器,供大家参考,具体内容如下 1.判断是否是手机端 function isMobile() { // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) { return true; } // 如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息 if (isset($_SERVER['H

thinkphp判断访客为手机端或PC端的方法

本文实例讲述了thinkphp判断访客为手机端或PC端的方法.分享给大家供大家参考.具体实现方法如下: 一.问题: 近日准备给自己的网站做一个小升级,让用户在手机二维码扫描的时候显示适合手机端来展示的模版[我用的是ThinkPHP3.0],代码是参考别人的 二.实现方法: 这里先说下大概的一个思路 简单两步: 统版本号和浏览器以及它的版本号(贴出的代码中数组中只有移动端信息,因此后面只需判断是否为数组中的某一个值即可). 根据数组中的值来判断访客是否为手机.pad.之类的移动端,如果是的话就规定

android手机端与PC端使用adb forword通信

PC端与Android手机端使用adb forword通信 服务器端代码如下: import java.io.IOException; import java.io.ObjectOutputStream; import java.net.Socket; import java.net.UnknownHostException; import java.util.Scanner; public class Server { public static final String TAG = "ser

判断iOS、Android以及PC端的示例代码

前言 我们在做移动端时,在跨平台.浏览器.移动设备兼容的时候,要根据设备.浏览器做特定调整,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下 还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制 1.navigator的一些常用属性 navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象 navigator.appVersion 浏览器的版本号 navigator.language 浏览器使用

JS如何实现网站中PC端和手机端自动识别并跳转对应的代码

1.  代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现PC端和手机端的功能.此时,就存在一个问题.项目在部署的时候只会使用一个地址,不会针对手机和PC端代码分别进行部署.这个时候就需要我们通过去识别视口分辨率的大小,来自动去跳转对应的代码. 2. 实现方式: 目前网上有很多的方法用来实现PC端和手机端的代码跳转,但我只用了一种实现方式.其他的暂时还没有尝

.NET微信开发之PC 端微信扫码注册和登录功能实现

一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网站做授权,确切来说是在微信端下做的一个授权.今天遇到的一个问题是,项目支持微信端以及 PC 端,并且开放注册.要求做到无论在 PC 端注册或者是在微信端注册之后都可以在另外一个端进行登录.也就是说无论 PC 或是微信必须做到"你就是你"(通过某种方式关联). 二.寻找解决方案 按传统的方式

PC 端微信扫码注册和登录实例

PC 端微信扫码注册和登录 一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网站做授权,确切来说是在微信端下做的一个授权.今天遇到的一个问题是,项目支持微信端以及 PC 端,并且开放注册.要求做到无论在 PC 端注册或者是在微信端注册之后都可以在另外一个端进行登录.也就是说无论 PC 或是微信必须做到"你就是你"(通过某种方式关联). 二

Java SpringMVC实现PC端网页微信扫码支付(完整版)

一:前期微信支付扫盲知识 前提条件是已经有申请了微信支付功能的公众号,然后我们需要得到公众号APPID和微信商户号,这个分别在微信公众号和微信支付商家平台上面可以发现.其实在你申请成功支付功能之后,微信会通过邮件把Mail转给你的,有了这些信息之后,我们就可以去微信支付服务支持页面:https://pay.weixin.qq.com/service_provider/index.shtml 打开这个页面,点击右上方的链接[开发文档]会进入到API文档说明页面,看起来如下 选择红色圆圈的扫码支付就

详解JS判断页面是在手机端还是在PC端打开的方法

我们想要的效果是pc文件和mobile文件统一入口,适配不同的设备. 先看看项目的目录: 在index.html里面配置js控制选择那一个文件夹下的文件就可以了. 我们要利用:Navigator 对象,Navigator 对象包含有关浏览器的信息. index.html很简单,直接上码吧: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="vi

PHP判断访客是否手机端(移动端浏览器)访问的方法总结【4种方法】

本文实例总结了PHP判断访客是否手机端(移动端浏览器)访问的方法.分享给大家供大家参考,具体如下: 在平常工作开发中,我们通常需要开发出PC端和移动端两个不同的系统,从而根据访问端的不同进入到不同的操作界面中.这就需要我们首先要对访问的客户端进行判断是PC端还是移动端. 本博文讨论使用PHP判断访问端是否是移动端(或是移动端浏览器)从而确定是移动端访问的4种方法: 1.根据 HTTP_X_WAP_PROFILE是否存在进行判断,存在则是移动端(部分服务商会屏蔽该信息) /** * 是否是移动端访