微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)
此类事件是手机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();
}
});
微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)的更多相关文章
- 微信小程序 禁止ios页面下拉下滑滚动 出现空白的情况
项目需要做了一个图片拖动指定组件上删除,和排序的功能android测试正常, ios会出现拖动图片页面也跟着下滑的尴尬情况. 查文档下拉刷新配置默认是关闭的,后经查找文档发现在本页面page.json ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- 微信小程序-页面下拉
微信小程序当滑动到最顶部和最底部时,继续下拉,会将整个页面拉下去或者拉上去,本来以为是客户端自有的特性,就没去管他,直到我的禅道出现了这个记录... 其实这个问题是可以解决的,只需要在你不想出现在此情 ...
- 页面滚动动态加载数据,页面下拉自动加载内容 jquery
<!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...
- Jquery页面滚动动态加载数据,页面下拉自动加载内容
<!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...
- 微信小程序的下拉刷新
微信小程序的下拉刷新:在page的js文件中有监听用户下拉刷新的处理函数onPullDownRefresh:function(){} //js文件中自带的处理函数,在onUnload下面,注意不要重复 ...
- 微信小程序iOS下拉白屏晃动,坑坑坑
感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText ...
- android4.4上全屏界面实现禁止状态栏下拉
附上我改动的方法:PhoneWindowManager.java里面的改动 --- a/frameworks/base/policy/src/com/android/internal/policy/i ...
- Android 禁止状态栏下拉
同学项目用到Android 禁止状态栏下拉,我也迷茫,网上很多资料都不行,最终找到了下面一篇博客,感觉很不错,说的比较详细,供大家参考了 http://blog.csdn.net/u011913612 ...
随机推荐
- 通过反射将变量值转为变量名本身ZZ
这是.NET反射的一个有趣小例子: 通过反射将变量值转为变量名本身. 当然要先添加命名空间:using System.Reflection; 示例代码如下: class Program { st ...
- 03_Swift2基础之基本数据类型+相互转换
1. 整数 整数就是没有小数部分的数字,比如`42`和`-23`.整数可以是`有符号`(正.负.零)或者`无符号`(正.零). Swift 提供了,,和位的有符号和无符号整数类型.这些整数类型和 C语 ...
- BZOJ4546(原) : 三元组
设$f(x)=\sum_{x|d}p(d)$. 则$ans=\sum_{i=1}^n\sum_{j=1}^n\sum_{k=1}^n\mu(i)\mu(j)\mu(k)f(lcm(i,j))f(lcm ...
- 图解Storm
问题导读:1.你认为什么图形可以显示hadoop与storm的区别?(电梯)2.本文是如何形象讲解hadoop与storm的?(离线批量处理.实时流式处理)3.hadoop map/reduce对应s ...
- Mongoose学习参考文档——基础篇
Mongoose学习参考文档 前言:本学习参考文档仅供参考,如有问题,师请雅正 一.快速通道 1.1 名词解释 Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model ...
- Eclipse 使用maven创建Dynamic Web Project
今天看到spring的官网首页已经没有下载连接了,建议使用maven构建spring项目.虽然maven已经不是新技术,但是这个我还没用过,谷歌走起! 通常创建项目都是用Eclipse,前几年还是My ...
- nmap的script参数列表
在新的nmap版本中,添加了script功能的使用.在nmap的安装目录的share/nmap/scripts中,已经有将61个写好的脚本提供. 具体的用法可以参考:http://nmap.org/b ...
- 利用jdk自带的运行监控工具JConsole观察分析Java程序的运行
利用jdk自带的运行监控工具JConsole观察分析Java程序的运行 原文链接 一.JConsole是什么 从Java 5开始 引入了 JConsole.JConsole 是一个内置 Java 性能 ...
- 创建型模式(前引)简单工厂模式Simple Factory
一引出的原因(解决下面的问题) 简单工厂模式(Simple Factory Pattern):又称为静态工厂方法(Static Factory Method)模式,它属于类创建型模式. 在简单工厂模式 ...
- [LintCode] Integer to Roman 整数转化成罗马数字
Given an integer, convert it to a roman numeral. The number is guaranteed to be within the range fro ...