先說結論： 可以去除滾動回彈,根據不同情況使用不同的方式。
1.程序內沒有滾動
直接使用下面代碼輕輕鬆鬆沒毛病
document.body.addEventListener('touchmove',function(e){
e.preventDefault()
},{ passive: false })
2.有滾動的情況
下面是去掉微信自帶的回彈的demo
<!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;
width: 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;
width: 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 style="height: 30vh">1......</p>
<p style="height: 30vh">2......</p>
<p style="height: 30vh">3......</p>
<p style="height: 30vh">4......</p>
<p style="height: 30vh">5......</p>
<p style="height: 30vh">6......</p>
</div>
<div class="footer">Footer</div>
</body>
<script>
var startY = 0;
function touchStart(e) {
try {
var touch = e.touches[0],
y = Number(touch.pageY);
startY = y;
} catch (e) {
alert(e);
}
}
document.addEventListener('touchstart', touchStart);
var ele = document.querySelector('.scrollEle');
document.addEventListener('touchmove', function (e) {
var point = e.touches[0];
if (ele.contains(e.target)) {
if (ele.scrollTop === 0 && point.clientY > startY) {
e.preventDefault();
} else if (ele.scrollTop === ele.scrollHeight - ele.offsetHeight && point.clientY < startY) {
e.preventDefault()
}
} else {
e.preventDefault();
}
}, { passive: false });
</script>
</html>
第一種 第二種
第一種是-webkit-overflow-scrolling: touch;屬性產生的滾動回彈，第二種是微信自帶的回彈，如果想要實現完全沒有滾動回彈此屬性就不能添加。之前在一個公衆號做入口的APP上我就看到過滾動不加-webkit-overflow-scrolling: touch;屬性的，滾動效果極差。我還想怎麼連這都不加，現在看好吧我錯了想去掉回彈是沒辦法。
爲什麼要去掉此屬性？（試想如果沒有‘頭部’元素，那麼此屬性的效果和微信自帶回彈無差）
注意：在實際應用此方式去除滾動時，一定要先確認到底是哪一層出現的滾動條。如果選錯可能導致效果無效或者整個頁面無法滾動（ele.scrollTop = 0說明並不是此元素滾動，如果是頂層上添加的滾動使用document.documentElement.scrollTop）可參考此文章
閒話 IOS微信下滾動回彈、事件穿透偶爾發生，試試先點無關元素再點滾動內容問題必發生 ￣へ￣
3.使用better-scroll替代原生滾動
better-scroll基於iscroll實現, 是一款解決移動端（已支持 PC）各種滾動場景需求的插件
想使用此插件我真的很建議是從項目一開始就使用不然會出現很多問題。
優點：完全去掉微信滾動回彈連帶事件穿透一併解決。
我遇到的問題： onscroll事件無法被監聽，滾動內容點擊事件混亂。雖然插件提供了應對阻止瀏覽器的原生 click 事件的解決辦法。但我這邊容器內點擊事件複雜，有些事件在設置 click爲true時管用有些在設置false時管用，這我想不到解決辦法。
如果你的滾動容器內沒有onscroll監聽並且通過設置better-scroll click屬性可以解決點擊事件問題可以試試使用此插件，（設置bounce： false可以去掉此插件的滾動回彈）
參考：
https://blog.csdn.net/u012392251/article/details/81539313
https://segmentfault.com/a/1190000010510291
https://juejin.im/post/5ad804c1f265da504547fe68
https://blog.csdn.net/zhanglong_web/article/details/82865596