原贴: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的更多相关文章

  1. js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

    开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: ...

  2. js禁止微信浏览器下拉显示黑底查看网址

    // 首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; // 然后取得触摸点的坐标 var star ...

  3. 完美解决,浏览器下拉显示网址问题 | 完美解决,使用原生 scroll 写下拉刷新

    在 web 开发过程中我们经常遇到,不想让用户下拉看到我的地址,也有时候在 div 中没有惯性滚动,就此也出了 iScroll 这种关于滚动条的框架,但是就为了一个体验去使用一个框架好像又不值得,今天 ...

  4. 完美解决safari、微信浏览器下拉回弹效果。

    完美解决safari.微信浏览器下拉回弹效果,只保留局部回弹效果. CSS代码 .box{ overflow: auto; -webkit-overflow-scrolling: touch; } H ...

  5. 阻止微信浏览器下拉滑动效果(ios11.3 橡皮筋效果)

    在升级到 ios11.3 系统后,发现之前阻止页面滚动的代码e.preventDefault代码失效了.于是自己折腾了一番,找到了解决办法,分享给大家. 一.前言 浏览器在移动端有一个默认触摸滚动的效 ...

  6. 完美解决safari、微信浏览器下拉回弹效果

    CSS代码: .box{ overflow: auto; -webkit-overflow-scrolling: touch; } HTML代码: <body class="box&q ...

  7. JS+CSS实现的下拉刷新/上拉加载插件

    闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pull ...

  8. 解决ios、微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

    解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问 ...

  9. DataGridView单元格内容自动匹配下拉显示

    页面显示数据使用的控件是ComponentFactory.Krypton.Toolkit中的KryptonDataGridView控件.在指定“商品”单元格中需要根据用户输入内容自动匹配数据库中商品信 ...

随机推荐

  1. 向量的一种特殊乘法 element wise multiplication

    向量的一种特殊乘法 element wise multiplication 物体反射颜色的计算采用这样的模型: vec3 reflectionColor = objColor * lightColor ...

  2. C# 开发的windows服务 不能调试——讨论整理

    CSDN的标题:C# 开发的windows服务 不能调试 System.Diagnostics.Debugger.Launch();在想加断点的地方加入这行,是进入断点的,可以进行调试,我的是xp系统 ...

  3. 正则表达式匹配IP地址

    '''首先分析ip地址的特征:255.255.255.255,前三位的数字处理基本一致 1位: 0-9              \d2位:10-99         [1-9]\d3位:100-19 ...

  4. evpp http server定制实现

    evpp http server定制实现 evpp http server定制实现 evpp http server定制实现

  5. mysql总复习

    目录 数据库操作 库操作 表操作 数据行操作 表关系操作 单表操作 外键创建 多表联查 pymysql模块 索引 主键索引 唯一索引 普通索引 数据库操作 库操作 create database 库名 ...

  6. 如何DIY个性PE

    前言:有时候在网络上能找到很不错的PE(无忧启动论坛),但是有时候PE的功能仍不能满足自己的需要(软件过旧,缺少某些功能),这时候就显得自己DIYPE的重要性 需要的工具: WIMTOOL(必备) 软 ...

  7. mysql json数据类型

    概述 Mysql从5.7.8版本开始支持JSON字段,可以高效的处理JSON文档.相比字符串字段,JSON字段有下面的几处优势: 自动的校验JSON格式,无效的文档会产生错误 优化的存储格式(结构化的 ...

  8. Java8-Executors-No.01

    import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util ...

  9. HDU 6125 - Free from square | 2017 Multi-University Training Contest 7

    思路来自这里 - - /* HDU 6125 - Free from square [ 分组,状压,DP ] | 2017 Multi-University Training Contest 7 题意 ...

  10. 浏览器顶部设置margin-top时存在的bug

    浏览器bug<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...