最近遇到一个需求，页面中只有一个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终于皇天不负有心人, 在网上找到了一个可以防页面滚动滑到顶端或底部的时候, 漏出微信丑丑的灰色底[/偷笑] 原文网址: 我的核心代码: 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();         }     }; }