移动端页面弹出框滚动,底部body锁定,不滚动微信网页禁止回弹效果

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

移动端页⾯弹出框滚动,底部body锁定,不滚动微信⽹页禁⽌
回弹效果
需求:页⾯有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动。

加上滚动后,底部body的滚动事件如何禁⽌,加上了overflow:hidden;还是不可⽤。

如下图:地区弹出框可以滚动,⽽底部的body不随着滚动。

参考⽹址:
动态的改变body的样式,测试了可⾏
var scrollTop = $body.scrollTop();//body设置为fixed之后会飘到顶部,所以要动态计算当前⽤户所在⾼度
$body.css({
'overflow':'hidden',
'position': 'fixed',
'top': scrollTop*-1
});
$loadMask.css('top',scrollTop);//设置遮罩层top值
/*取消后设置回来*/
$body.css({
'overflow':'auto',
'position': 'static',
'top': 'auto'
});
另:
微信页⾯会出现下拉回弹的情况,这个会有些影响。

以下是转载
warning:较完美,意思就是不完美。

如果朋友们有完美的解决⽅案,⿇烦给我留⾔。

谢谢哈。

=============我是华丽丽的分隔线===============
今天被提了⼀个需求:页⾯在微信浏览器中禁⽌下拉露底。

如:不能出现下图这种情况。

理由未明,反正需求就是这个。

为了解决这个问题,当然就得问度娘啦。

⽹上提供的解决⽅法基本是:
这种是最坑爹的答案,虽然是把下拉弹性效果禁⽌了,可是也把页⾯⾥的滚动条禁⽌了,导致⽹页不能滚屏。

经过了解。

微信下拉弹性效果其实是浏览器本⾝的⼀种特性,为什么浏览器的设计者要设计这种特性暂不可知,知道的朋友们⿇烦告诉我⼀声哈。

⽽下拉回弹是touchmove事件的⼀种默认属性,根据这个,只要禁⽌浏览器最底层box(也就是body)的touchmove事件,就不会回弹了,于是乎就有了上⾯那种只图⼀时之快不负责的代码。

既然touchmove事件不能禁⽤,但有时⼜不能⽣效,于是笔者想到⼀种⽅法,如果页⾯滚动条在最顶部的时候,禁⽌下拉,反之允许下拉,这个问题不就顺利解决啦?于是乎有了下⾯代码:
/**
* 禁⽌浏览器下拉回弹
*/
function stopDrop() {
var lastY;//最后⼀次y坐标点
$(document.body).on('touchstart', function(event) {
lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后⼀次Y度坐标。

});
$(document.body).on('touchmove', function(event) {
var y = event.originalEvent.changedTouches[0].clientY;
var st = $(this).scrollTop(); //滚动条⾼度
if (y >= lastY && st <= 10) {//如果滚动条⾼度⼩于0,可以理解为到顶了,且是下拉情况下,阻⽌touchmove事件。

lastY = y;
event.preventDefault();
}
lastY = y;
});
}
只需要在⽹页加载完后⽴即执⾏此函数,就可以较完美地实现阻⽌⽹页回弹。

当然,只是较完美,还不是完美。

因为我发现,当⽹页进⼊出
现下拉回弹效果时,⼿指不放开再往下拉,坑爹地这时候竟然不是touchmove事件了,⽽是没有事件!好吧,浏览器设计者深埋雷,我们就边踩边挖吧,各前端狗们,⼤家共勉!。

相关文档
最新文档