开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图:

网上好多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 = , startY = ;
//touchstart事件
function touchSatrtFunc(evt) {
try
{
//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
var touch = evt.touches[]; //获取第一个触点
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[],
_top = _ss.scrollTop;
// 什么时候到底部
var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;
// 到达顶端
if (_top === ) {
// 阻止向下滑动
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 > && _top < _bottomFaVal) {
ev.stopPropagation();
} else {
ev.preventDefault();
}
};

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll的更多相关文章

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

    原贴:https://www.cnblogs.com/jasonwang2y60/p/6848464.html 原贴:https://www.cnblogs.com/jasonwang2y60/p/6 ...

  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. 流与文本文件操作(C#)

    1.流的基本概念 流是任何输入输出库的必不可少的组成部分.当你的程序需要从一个外部数据源(比如,files.other PCs或servers等)读或者写数据时,就需要用到流streams. 流是由一 ...

  2. crond脚本执行并发冲突问题

    在计划任务中,偶尔会看到重复执行的情况: 例如我们公司的计划任务举例: */ * * * * root cd /opt/xxxx/test_S1/html/xxxx/admin; php index. ...

  3. java学习笔记—HTTP协议(10)

    客户端浏览器和服务器Tomcat要进行基本的请求和响应的处理. 其实浏览器和服务器通信的数据的格式已经使用协议进行固定好了,只要双方发送固定格式的数据,那么就可以完成基本的通信. 如果开发者需要查看这 ...

  4. [arc079f] Namori Grundy 分类讨论

    Description 给给全有一个NN个点NN条边的有向图,点的的编号从11到NN 给给全的图有NN条边,形如:(p1,1),(p2,2),...,(pN,N)(p1,1),(p2,2),...,( ...

  5. 从Oracle官网学习oracle数据库和java

    网上搜索Oracle官网:oracle官网 进入Oracle官网 点击menu-Documentation-Java/Database,进入Oracle官网的文档网站 首先是Java,可以看到Java ...

  6. BZOJ 1150--数据备份(链表&堆&贪心)

    1150: [CTSC2007]数据备份Backup Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2572  Solved: 1038[Submit ...

  7. python 快速幂求斐波那契数列

    先占坑 后面再写详细的 import numpy as np def pow(n): a = np.array([[1,0],[0,1]]) b = np.array([[1,1],[1,0]]) n ...

  8. 队列的理解和实现(一) ----- 循环队列(java实现)

    什么是队列 我们都知道栈是先进后出的一种线性表,与之相反的是,队列是一种先进先出的线性表.它只允许在表的一端进行插入,而在另一端进行删除.举个例子来说,在生活中我们买东西需要进行排队,最先排队的可以最 ...

  9. C#-WinForm-TextBox中只能输入数字的几种常用方法(C#)

    方法一: private void tBox_KeyPress(object sender, KeyPressEventArgs e) { if (e.KeyChar == 0x20) e.KeyCh ...

  10. L05-Linux部署msmtp+mutt发送邮件

    一.前言 首先,得明白发送一封邮件的流程,下面一段理论摘抄自廖雪峰的官网网站https://www.liaoxuefeng.com/article/00137387674890099a71c04005 ...