如标题所示，这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发，自己重写了一下代码
效果图：
代码：
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>移动端->弹出层内容滚动的时候，不影响body的滚动条处理</title> <style> *{ margin:0; padding:0; } body{ height:1500px; } .mark{ width:100%; height:100%; background:rgba(0,0,0,.5); position:fixed; left:0; top:0; } .layerNode{ width:200px; height:200px; left:50%; top:50%; margin-left:-100px; margin-top:-100px; background-color:#fff; position: absolute; overflow-y:scroll;
-webkit-overflow-scrolling : touch; /* ios 自带滚动条不平滑解决方法 */
}
</style> </head> <body> body层 <div class="mark"> <div class="layerNode"> <p>弹出层 start</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>测试</p> <p>弹出层 end</p> </div> </div> <script type="text/javascript"> //弹出层滚动条不影响到body [layerNode：需要滚动的元素] var DivScroll = function( layerNode ){ //如果没有这个元素的话，那么将不再执行下去 if ( !document.querySelector( layerNode ) ) return ; this.popupLayer = document.querySelector( layerNode ) ; this.startX = 0 ; this.startY = 0 ; this.popupLayer.addEventListener('touchstart', function (e) { this.startX = e.changedTouches[0].pageX; this.startY = e.changedTouches[0].pageY; }, false); // 仿innerScroll方法 this.popupLayer.addEventListener('touchmove', function (e) { e.stopPropagation(); var deltaX = e.changedTouches[0].pageX - this.startX; var deltaY = e.changedTouches[0].pageY - this.startY; // 只能纵向滚 if(Math.abs(deltaY) < Math.abs(deltaX)){ e.preventDefault(); return false; } if( this.offsetHeight + this.scrollTop >= this.scrollHeight){ if(deltaY < 0) { e.preventDefault(); return false; } } if(this.scrollTop === 0){ if(deltaY > 0) { e.preventDefault(); return false; } } // 会阻止原生滚动 // return false; },false); } //调用 var divScroll = new DivScroll('.layerNode'); </script> </body> </html>