webApp禁止页面整体下拉，不影响页面内部scroll 

<section class="page-container"> 
　　<div style="width: 100%;min-height: 2000px;">内容滚动区域</div> 
</section>
// 禁止页面滑动
      var overscroll = function (el) {
        el.addEventListener('touchstart', function () {
          let top = el.scrollTop
          let totalScroll = el.scrollHeight
          let currentScroll = top + el.offsetHeight
          //If we're at the top or the bottom of the containers
          //scroll, push up or down one pixel.
          //
          //this prevents the scroll from "passing through" to
          //the body.
          if (top === 0) {
            el.scrollTop = 1
          } else if (currentScroll === totalScroll) {
            el.scrollTop = top - 1
          }
        })
        el.addEventListener('touchmove', function (evt) {
          //if the content is actually scrollable, i.e. the content is long enough
          //that scrolling can occur
          if (el.offsetHeight < el.scrollHeight) {
            evt._isScroller = true
          }
        })
      }
      overscroll(document.querySelector('.page-container'))//允许滚动的区域
      document.body.addEventListener('touchmove', function (evt) {
        //In this case, the default behavior is scrolling the body, which
        //would result in an overflow.  Since we don't want that, we preventDefault.
        if (!evt._isScroller) {
          evt.preventDefault()
        }
      })

 

禁止

document.querySelector('body').addEventListener('touchmove', function(e) {
    e.preventDefault();
})

如果页面有部分区域必须需要滑动，需要用touchmove事件的话，那么可以把那部分的touchmove事件过滤掉

比如我想要以下代码中的bottom类可以用touchmove事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>微信禁止下拉露黑底</title>
</head>
<body>
    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>
document.querySelector('body').addEventListener('touchmove', function(e) {
    if (!document.querySelector('.bottom').contains(e.target)) {
        e.preventDefault();
    }
})

 

posted @ 2019-06-06 13:55  ronle  阅读(1563)  评论(0)    收藏  举报