解决弹窗内容滚动时,后方body也一起滚动的问题

大猫会长

已于 2024-03-20 15:53:31 修改

阅读量308

点赞数 3

文章标签： javascript

于 2024-03-20 15:50:48 首次发布

本文链接：https://blog.csdn.net/aexwx/article/details/136878653

版权

本文介绍了如何在网页中使用iNoBounce库来防止弹窗内容过多时滚动导致的body整体滚动问题，通过添加特定CSS属性实现滚动区域的独立控制。

摘要由CSDN通过智能技术生成

网页里有小的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>