最近遇到一个需求,页面中只有一个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滚动防微信露底的更多相关文章

  1. JS Div滚动,下拉框添加属性,年月日下拉条

    创建某一下拉菜单的项: str = str+"<option value='"+i+"'>"+i+"</option>&quo ...

  2. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

  3. mui div滚动阻止触发下拉刷新

    function orderListScroll () { var _orderObj = document.querySelector('.circulation-loan-list') //div ...

  4. IOS苹果手机上 iframe 滚动失效条问题,局部滚动开启弹性滚动!

    html:bo<div class="scroll-wrapper"> <iframe src=""></iframe> & ...

  5. CSS scroll-behavior属性: 滚动框指定滚动行为

    概念 当用户手动导航或者 CSSOM scrolling API 触发滚动操作时,CSS 属性 scroll-behavior 为一个滚动框指定滚动行为,其他任何的滚动,例如那些由于用户行为而产生的滚 ...

  6. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

  8. js点击左右滚动+默认自动滚动类

    js点击左右滚动+默认自动滚动类 点击下载

  9. Android防微信首页左右滑动切换

    大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图: 之前也在博客上看到别人的实现,再次基础上,我做了些优化.首先说下实现原理,大神略过,o(╯□╰ ...

随机推荐

  1. Redis安装和客户端cli常见操作

    安装Redis $ wget http://download.redis.io/releases/redis-4.0.6.tar.gz $ tar xzf redis-4.0.6.tar.gz $ c ...

  2. PIL图片合成旋转缩放

    用PIL实现图片的旋转,缩放,合成 我们需要知道合成位置的中心点坐标,用中心点坐标,不使用左顶点的坐标是由于缩放过程容易计算. 假设A是局部透明的图片,我们希望把B放在A的底部,仅从A的透明部分显示B ...

  3. hosts,命令行前面的显示

    1,/etc/hosts,主机名ip配置文件. # Do not remove the following line, or various programs # that require netwo ...

  4. HDU 2647 Reward(拓扑排序+判断环+分层)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2647 题目大意:要给n个人发工资,告诉你m个关系,给出m行每行a b,表示b的工资小于a的工资,最低工 ...

  5. Windows内核执行体对象管理器的操作过程与分析

    我之前写过一个有关于对象管理的读书笔记.但是这篇文章与前面的不同,这是我个人对对象管理器到底是什么的一个分析,而且也是直接对WRK代码进行的阅读. 执行体对象即我们通常所言的内核对象,我们知道Wind ...

  6. python中的any和all函数

    any和all函数是判断一组数据真假性的综合结果.以下摘选自Stackoverflow. ------------------ 分割线开始 ----------------- any any will ...

  7. fedora安装后的配置

    fedora安装后的一些配置 (mirror)源 换源 默认从fedora官网下载太慢,考虑换用国内的源(镜像站点),推荐中科大.阿里云.浙大.网易等的源. 比如我用浙大ZJU的源http://mir ...

  8. JavaScript与C#互通的DES加解密算法

    原文地址:传送门 本文提供了一个能使JavaScript与C#互通的DES加解密算法的实现,在前台页面中用JavaScript版本的DES算法将数据加密之后,传到服务器端,在服务器端可用C#版本的DE ...

  9. C# 6.0 新特性 (二)

    自动属性初始化表达式 有过正确实现结构经验的所有 .NET 开发人员无疑都为一个问题所困扰:需要使用多少语法才能使类型固定不变(为 .NET 标准建议的类型).此问题实际上是只读属性存在的问题: 定义 ...

  10. js 利用事件委托解决mousedown中的click

    有一个需求是这样的: 父元素div绑定一个mousedown事件,子元素a绑定一个click事件. 看解构: <div id="nav"> <a href=&qu ...