[转]js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html
原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html
原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:

网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法:
$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});
or
document.addEventListener('touchmove', function(e){e.preventDefault()}, false);
查阅了资料然后进行了修改,于是得到以下解决方案,可以达到禁止微信黑底并且不影响上拉加载
// 首先禁止body
document.body.ontouchmove = function (e) {
e.preventDefault();
}; // 然后取得触摸点的坐标
var startX = 0, startY = 0;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[0]; //获取第一个触点
var x = Number(touch.pageX); //页面触点X坐标
var y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y; } catch (e) {
alert('touchSatrtFunc:' + e.message);
}
}
document.addEventListener('touchstart', touchSatrtFunc, false); // 然后对允许滚动的条件进行判断,这里讲滚动的元素指向body
var _ss = document.body;
_ss.ontouchmove = function (ev) {
var _point = ev.touches[0],
_top = _ss.scrollTop;
// 什么时候到底部
var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
// 到达顶端
if (_top === 0) {
// 阻止向下滑动
if (_point.clientY > startY) {
ev.preventDefault();
} else {
// 阻止冒泡
// 正常执行
ev.stopPropagation();
}
} else if (_top === _bottomFaVal) {
// 到达底部 如果想禁止页面滚动和上拉加载,讲这段注释放开,也就是在滚动到页面底部的制售阻止默认事件
// 阻止向上滑动
// if (_point.clientY < startY) {
// ev.preventDefault();
// } else {
// // 阻止冒泡
// // 正常执行
// ev.stopPropagation();
// }
} else if (_top > 0 && _top < _bottomFaVal) {
ev.stopPropagation();
} else {
ev.preventDefault();
}
};
[转]js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll的更多相关文章
- js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll
开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...
- js禁止微信浏览器下拉显示黑底查看网址
// 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var star ...
- 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新
在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...
- 完美解决safari、微信浏览器下拉回弹效果。
完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...
- 阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)
在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...
- 完美解决safari、微信浏览器下拉回弹效果
CSS代码: .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码: <body class="box&q ...
- JS+CSS实现的下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...
- 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能
解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...
- DataGridView单元格内容自动匹配下拉显示
页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信 ...
随机推荐
- python将一个字符串写入文件中的编码问题
python2将一个字符串写入文件中: 1.如果字符串是str类型 # -*- coding:utf-8 -*- txtFile="今天天气不错" name = "1.t ...
- 持续集成工具FinalBuilder使用心得
FinalBuilder 使用这款自动化创建和发布管理工具,软件开发者可以定义和维护一个可靠的以及可重复创建的程序.FinalBuilder包括集成的带有版本的控制系统,文件和目录选项,重复器,源代码 ...
- iframe中的target属性
在使用iframe的时候,我们有时候会遇到,外面的链接,去操作iframe中的页面 <!DOCTYPE html> <html> <head> <meta c ...
- nginx用指针的值的最后一位来判断过期事件
nginx中,将地址的最后一位取出来,用Instace变量标识,用来判断是否连接已经被释放成为过期时间 为什么指针地址最后一位一定是0呢? 这里的内存地址,一定是内存分配器分配出来的地址,如new . ...
- 【转】Golang关于channel传递引用引发的坑
原文: https://studygolang.com/articles/12310/comment/17923 ------------------------------------------- ...
- idea在springboot项目中显示Run Dashboard
1.Run->Edit Configurations 2.在Templates[Defaults]-> Configurations available in Run Dashboard ...
- 前端知识体系:JavaScript基础-原型和原型链-new一个对象的详细过程,手动实现一个 new操作符
可以描述 new一个对象的详细过程,手动实现一个 new操作符 1. new 一个对象的详细过程:(原文地址) 首先我们看下new Person输出什么? var Person = function( ...
- python-windows安装相关问题
1.python的环境配置,有些时候是没有配置的,需要在[系统环境]-[path]里添加. 2.安装pip:从官网下载pip包,然后到包目录==>python setup.py install ...
- JSP运行原理以及执行过程源码分析
我们在开发JavaWeb的过程中,可能有过这样的疑问,当我们编写jsp页面时,不用引用不用创建就可以使用request.session.application对象,当使用浏览器访问JSP页面时,查看页 ...
- 2019牛客多校第四场J free——分层图&&最短路
题意 一张无向图,每条边有权值,可以选择不超过 $k$ 条路使其权值变成0,求 $S$ 到 $T$ 的最短路.(同洛谷 P4568) 分析 首先,分层图最短路可以有效解决这种带有 「阶段性」的最短路, ...