开始我用的是
$('html,body').css('overflow','hidden');
后来发现在移动端有问题
$('html,body').css('overflow','hidden');
这样就ok了
好吧！到此为止本以为结束了，但是在移动端浏览器和微信浏览器中发现有问题（页面加载后的一次弹出模态框时，模态框下面的页面会跑到页面最顶部），最后移动端的解决办法如下：
var mo=function(e){e.preventDefault()}; /***禁止滑动***/ function stop(){ document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 } /***取消滑动限制***/ function move(){ document.body.style.overflow='';//出现滚动条 document.removeEventListener("touchmove",mo,false); }
上面方法解决了页面禁止滑动问题，但是问题来了，如果页面上有部分区域是需要滚动的该怎么解决？
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>