<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" /> <style> *{ margin: 0; padding:0; } button{ margin: 10px; } .test{ position: relative; width: 300px; height: 1000px; background: #ccc; } .test .head, .test .center, .test .foot{ position: absolute; left:0; } .test .head{ top:0; } .test .center{ top: 500px; } .test .foot{ bottom: 0; } </style> </head> <body> <button type="button" id="no_scroll">点我屏幕不能滚动</button> <button type="button" id="scroll">点我屏幕允许滚动</button> <div class="test"> <p class="head">这里是头部</p> <p class="center">这里是中部</p> <p class="foot">这里是底部</p> </div> <script type="text/javascript"> var handler = function () { event.preventDefault(); event.stopPropagation(); }; document.getElementById("no_scroll").addEventListener('click',function(){ document.body.style.cssText="overflow:hidden"; document.body.addEventListener('touchmove',handler,false); document.body.addEventListener('wheel',handler,false); }); document.getElementById("scroll").addEventListener('click',function(){ document.body.style.cssText="overflow:auto"; document.body.removeEventListener('touchmove',handler,false); document.body.removeEventListener('wheel',handler,false); }); </script> </body> </html>