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

来源：互联网发布：数控车床电脑编程软件编辑：程序博客网时间：2024/06/08 14:22

此类事件是手机touchmove默认事件行为，可以通过js代码隐藏事件：

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});ordocument.addEventListener('touchmove', function(e){e.preventDefault()}, false);

但这样往往会把页面原生的scroll效果也一同去掉了，下面的代码可以完美解决这个问题：

var overscroll = function(el) {  el.addEventListener('touchstart', function() {    var top = el.scrollTop      , totalScroll = el.scrollHeight      , 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('.scroll'));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();  }});

下边是一个demo的展示，可以将其使用编译器打开并配置本地服务器使用手机打开查看效果：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <style type="text/css">            * {                margin: 0;                padding: 0;            }            html,            body {                width: 100%;                height: 100%;                overflow: hidden;            }            body {                display: flex;                flex-direction: column;            }            header {                width: 100%;                height: 44px;                background: black;            }            footer {                width: 100%;                height: 50px;                background: black;            }            section {                flex: 1;                overflow: auto;            }        </style>    </head>    <body>        <header>头</header>        <section class="scroll">            <div style="width: 100%;min-height: 2000px;">内容滚动区域</div>        </section>        <footer>尾</footer>        <script>            var overscroll = function(el) {                el.addEventListener('touchstart', function() {                    var top = el.scrollTop,                        totalScroll = el.scrollHeight,                        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('.scroll'));//允许滚动的区域            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()                }            })        </script>    </body></html>

2 0