<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } .header, .footer { position: fixed; 100vw; height: 40px; line-height: 40px; text-align: center; z-index: 3; } .header { top: 0; border-bottom: 1px solid #e6e6e6; } .footer { bottom: 0; border-top: 1px solid #e6e6e6; } .scrollEle { position: fixed; 100vw; top: 40px; bottom: 40px; z-index: 2; background: #fff; overflow-y: scroll; -webkit-overflow-scrolling: touch; } </style> </head> <body> <div class="header">Header</div> <div class="scrollEle"> <p>......</p> <p>......</p> <p>......</p> <p>......</p> </div> <div class="footer">Footer</div> </body> <script> var startX = 0, startY = 0; function touchStart(e) { try { var touch = e.touches[0], x = Number(touch.pageX), y = Number(touch.pageY); startX = x; startY = y; } catch (e) { alert(e); } } document.addEventListener('touchstart', touchStart); var ele = document.querySelector('.scrollEle'); ele.ontouchmove = function (e) { var point = e.touches[0], eleTop = ele.scrollTop, eleScrollHeight = ele.scrollHeight, eleOffsetHeight = ele.offsetHeight, eleTouchBottom = eleScrollHeight - eleOffsetHeight; if (eleTop === 0) { if (point.clientY > startY) { e.preventDefault(); } } else if (eleTop === eleTouchBottom) { if (point.clientY < startY) { e.preventDefault() } } }; </script> </html>