如標題所示，這里受 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>