禁止body滚动允许div滚动防微信露底
最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动。
正常来讲加上
body{height:100%;overflow: hidden;}
应该就阻止页面滚动了。可是很悲催的是手机端并不能很好的执行,而且还有弹性效果。
所以只能对默认的滚动进行干涉。
首先禁止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);
然后对允许滚动的div进行判断
var _ss = document.getElementById("div的id");
_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();
}
};
这样处理完后,就只能指定的div滚动了。
变通一下,就可以实现微信防露底
最近做移动端,总是遇到很蛋疼的问题, 决定把一些黑魔法记下来, 微信浏览器中想必会有很多事情让我大前端小伙伴头疼,
23333终于皇天不负有心人, 在网上找到了一个可以防页面滚动滑到顶端或底部的时候, 漏出微信丑丑的灰色底[/偷笑]
原文网址:https://blog.ghostry.cn/program/702.html
我的核心代码:
prevent:function () {
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);
var _ss = document.getElementById("contain");
_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();
}
};
}
禁止body滚动允许div滚动防微信露底的更多相关文章
- JS Div滚动,下拉框添加属性,年月日下拉条
创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...
- JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...
- mui div滚动阻止触发下拉刷新
function orderListScroll () { var _orderObj = document.querySelector('.circulation-loan-list') //div ...
- IOS苹果手机上 iframe 滚动失效条问题,局部滚动开启弹性滚动!
html:bo<div class="scroll-wrapper"> <iframe src=""></iframe> & ...
- CSS scroll-behavior属性: 滚动框指定滚动行为
概念 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚 ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...
- js点击左右滚动+默认自动滚动类
js点击左右滚动+默认自动滚动类 点击下载
- Android防微信首页左右滑动切换
大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图: 之前也在博客上看到别人的实现,再次基础上,我做了些优化.首先说下实现原理,大神略过,o(╯□╰ ...
随机推荐
- Redis安装和客户端cli常见操作
安装Redis $ wget http://download.redis.io/releases/redis-4.0.6.tar.gz $ tar xzf redis-4.0.6.tar.gz $ c ...
- PIL图片合成旋转缩放
用PIL实现图片的旋转,缩放,合成 我们需要知道合成位置的中心点坐标,用中心点坐标,不使用左顶点的坐标是由于缩放过程容易计算. 假设A是局部透明的图片,我们希望把B放在A的底部,仅从A的透明部分显示B ...
- hosts,命令行前面的显示
1,/etc/hosts,主机名ip配置文件. # Do not remove the following line, or various programs # that require netwo ...
- HDU 2647 Reward(拓扑排序+判断环+分层)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2647 题目大意:要给n个人发工资,告诉你m个关系,给出m行每行a b,表示b的工资小于a的工资,最低工 ...
- Windows内核执行体对象管理器的操作过程与分析
我之前写过一个有关于对象管理的读书笔记.但是这篇文章与前面的不同,这是我个人对对象管理器到底是什么的一个分析,而且也是直接对WRK代码进行的阅读. 执行体对象即我们通常所言的内核对象,我们知道Wind ...
- python中的any和all函数
any和all函数是判断一组数据真假性的综合结果.以下摘选自Stackoverflow. ------------------ 分割线开始 ----------------- any any will ...
- fedora安装后的配置
fedora安装后的一些配置 (mirror)源 换源 默认从fedora官网下载太慢,考虑换用国内的源(镜像站点),推荐中科大.阿里云.浙大.网易等的源. 比如我用浙大ZJU的源http://mir ...
- JavaScript与C#互通的DES加解密算法
原文地址:传送门 本文提供了一个能使JavaScript与C#互通的DES加解密算法的实现,在前台页面中用JavaScript版本的DES算法将数据加密之后,传到服务器端,在服务器端可用C#版本的DE ...
- C# 6.0 新特性 (二)
自动属性初始化表达式 有过正确实现结构经验的所有 .NET 开发人员无疑都为一个问题所困扰:需要使用多少语法才能使类型固定不变(为 .NET 标准建议的类型).此问题实际上是只读属性存在的问题: 定义 ...
- js 利用事件委托解决mousedown中的click
有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href=&qu ...