网页里有小的modal弹窗,如果内容过多,需要垂直滚动,那么滚动到底部后继续滚动,会牵连到body也一起滚动.
github有一个库叫iNoBounce可以阻止滚动
官网:
GitHub - lazd/iNoBounce: Stop your iOS webapp from bouncing around when scrolling
默认载入时就已生效,
给需要生效的dom加3个css属性
overflow: auto 和-webkit-overflow-scrolling: touch.
height 或 max-height
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>title</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
</head>
<script src="iNoBounce.js"></script>
<style>
*{margin:0;padding:0;}
.wrap-bg{width:100px;height:2000px;background-color: beige;}
.messages {
height: 220px;
overflow: auto;
-webkit-overflow-scrolling: touch;
border:3px solid #a1a;
position:fixed;
top:310px;
text-align:right;
overscroll-behavior: contain;
}
</style>
<body>
<div class="wrap-bg">第一行1111orem ipsum, dolor sit amet consectetur adipisicing elit. Dolor minima, nesciunt quasi ipsa minus a, eum, eligendi consectetur error mollitia hic nobis. Rerum quae voluptates laudantium ipsa aperiam teneturLorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor minima, nesciunt quasi ipsa minus a, eum, eligendi consectetur error mollitia hic nobis. Rerum quae voluptates laudantium ipsa aperiam teneturLorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor minima, nesciunt quasi ipsa minus a, eum, eligendi consectetur error mollitia hic nobis. Rerum quae voluptates laudantium ipsa aperiam teneturLorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor minima, nesciunt quasi ipsa minus a, eum, eligendi consectetur error mollitia hic nobis. Rerum quae voluptates laudantium ipsa aperiam teneturLorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor minima, nesciunt quasi ipsa minus a, eum, eligendi consectetur error mollitia hic nobis. Rerum quae voluptates laudantium ipsa aperiam teneturLorem ipsum, dolor sit amet consectetur adipisicing elit. Dolor minima, nesciunt quasi ipsa minus a, eum, eligendi consectetur error mollitia hic nobis. Rerum quae voluptates laudantium ipsa aperiam tenetur corrupti?</div>
<div class="messages">这是弹窗<br /><br /><br /><br />啊啊啊<br />不不不<br />吃吃吃<br />对对对<br />呃呃呃<br />哈哈哈<br />嘎嘎嘎嘎<br />规划局<br /><button onclick="iNoBounce.disable()">点击禁用iNoBounce</button><button onclick="iNoBounce.enable()">点击开启iNoBounce</button></div>
<script>
// document.addEventListener('touchmove',(e)=>{
// e.preventDefault()
// console.log('======123',123);},{passive:true})
</script>
</body>
</html>