zoukankan      html  css  js  c++  java
  • webApp禁止页面整体下拉,不影响页面内部scroll

    <section class="page-container"> 
      <div style=" 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();
        }
    })
  • 相关阅读:
    oracle死锁的检测查询及处理
    oracle 制定定时任务
    struts2上传图片超过大小给出错误提示
    在jquery的ajax方法中的success中使用return要注意的问题
    dwr框架中DWRUtil的方法
    jQuery UI Autocomplete是jQuery UI的自动完成组件
    字符串转换成js的日期格式
    oracle sqlplus 常用操作
    ORACLE 查看表结构
    input 的read only 和 disable的区别
  • 原文地址:https://www.cnblogs.com/ronle/p/10984561.html
Copyright © 2011-2022 走看看