问题:
不管如何禁止(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不会出现滚动条
}