版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_23876873/article/details/87824500
问题：
不管如何禁止（event.stopPropagation();event.preventDefault()），阻止默认事件，中断消息传播，都不行。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.scrollbox{
width: 100%;
//height: 100vh;//----------------------------------->这里是关键
background-color: aquamarine;
overflow: scroll;
}
.scroll{
position: absolute;
top: 100px;
width: 100%;
height: 400px;
background-color: beige;
overflow: scroll;
}
.neirong{
height: 700px;
background-color:coral;
}
</style>
</head>
<body>
<div class="scrollbox">
3<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
6<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>3<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
6<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>3<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
6<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>
</div>
<div class="scroll">
<div class="neirong">
3<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
6<br>
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
2<br>
</div>
</div>
</body>
<script>
let scrolldiv = document.querySelector('.scroll');
scrolldiv.addEventListener('touchstart',function(event){
console.log(this,event)
// event.stopPropagation();
},
false
)
let scrollbox = document.querySelector('.scrollbox');
scrollbox.addEventListener('touchstart',function(event){
console.log('body-------------',this,event,)
// event.preventDefault()
// event.stopPropagation();
}
// ,{ passive: false}
)
</script>
</html>
效果：
橙色区域，滑动到底部和顶部，再继续滑动，就会带动绿色滑动。
而console.log('body-------------',this,event)没有答应，说明 绿色的块 滚动，跟事件阻止和中断消息传播没有关系。
猜测这是浏览器的行为；只要body高度超过100vh，这种行为就会出现。
解决办法：
不让body高度超过100vh，既不然body出现滚动条。
.scrollbox{
height: 100vh;//body不会出现滚动条
}