首页 > 程序 > 禁止body滚动允许div滚动防微信露底
作者:ghostry 发布时间:2016-05-28 浏览: 23491
转载注明出处: https://blog.1ge.fun/program/702.html最近遇到一个需求,页面中只有一个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滚动了。
变通一下,就可以实现微信防露底
下一篇: 小米5miui7稳定版深度精简列表解决耗电问题释放内存
[...]最近做移动端,总是遇到很蛋疼的问题, 决定把一些黑魔法记下来, 微信浏览器中想必会有很多事情让我大前端小伙伴头疼,23333终于皇天不负有心人, 在网上找到了一个可以防页面滚动滑到顶端或底部的时候, 漏出微信丑丑的灰色底[/偷笑]原文网址:https://blog.ghostry.cn/program/702.html我的核心代码:prevent:function () { var star[...]
[...]})(); 注册 登录 JavaPHP健康美女明星标签 引力一族× 首页 IT数据库MySQLoracleRedisC语言JavaPHPWeb框架html5CSSJavaScript正则表达式 健康女性健康男性健康 性感&诱惑明星写真性感诱惑校花美女清纯美眉 包罗万象 搜索 首页IThtml5JavaScript正文微信页面滚动防露底 – jaina [...]
不够彻底
我写了一个全面禁止的脚本 :https://github.com/0123cf/www
I think you have observed some very interesting details , appreciate it for the post. dfcfadfekckbekcb
好东西
当滑动的起点为锚点时,会直接进入该链接,也就是说在起点处貌似有点击事件
求帮我改一下网址好吗,跪求大神 请你吃“糖”
[...]转载出处: https://blog.ghostry.cn/program/702.html[...]