滚动穿透问题完美解决方案

最新推荐文章于 2024-10-25 18:52:45 发布

原创最新推荐文章于 2024-10-25 18:52:45 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript 专栏收录该内容

5 篇文章

订阅专栏

滚动穿透：简单的说，滚动穿透就是弹层中有滚动时，滚动弹层滚动条背景下面内容也会滚动；

目标：弹层滚动时，背景下面内容不会滚动，弹出层关闭后页面的滚动位置仍在原处不会丢失！

下面这段代码直接引用，看效果；

<!DOCTYPE html>
<html lang="zh-CN" >
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>Document</title>
<style>
   .box{
       text-align: center;
       margin-bottom: 400px;
   }
   .modal{
       background: rgba(0, 0, 0, 0.5);
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
   }
   .modal-frame{
       position: absolute;
   left: 10%;
   right: 10%;
   top: 50%;
   transform: translateY(-50%);
   border: solid 1px #ddd;
   background: #fff;
   padding: 1em;
   }
   .page{
       padding: 0 15px;
   width: 100%;
   margin: 0 auto;
   /*-webkit-box-flex: 1;
   -ms-flex: 1;
   flex: 1;*/
   }
   body.modal-open{
       position: fixed;
   width: 100%;
   }
</style>
</head>
<body style="overflow-x: hidden;width: 100%;">
   <div class="page" >
       <h1>解决滚动穿透问题demo</h1>
       <div class="box" style="margin-top: 150px;">
           <a href="javascript:;" class="js-open-modal" id="click1">Open Modal One</a>
       </div>
       <div class="box">
           <a href="javascript:;" class="js-open-modal" id="click2">Open Modal Two</a>
       </div>
       <div id="modal" class="modal">
       <div class="modal-frame">
       <div style="height:9em;overflow-y:auto;">
       这里是可滚动内容<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       滚动 Content<br>
       </div>
       </div>
       </div>
   </div>
</body>
<script src="./jquery-3.0.0.min.js"></script>
<script type="text/javascript">
   // $("#click1").click(function()
   $(function(){
       var scrollTop;
       var ModalHelper = (function(bodyCls) {
       return {
       afterOpen: function() {
       scrollTop = document.scrollingElement.scrollTop;
       document.body.classList.add(bodyCls);
       document.body.style.top = -scrollTop + 'px';
       },
       beforeClose: function() {
       document.body.classList.remove(bodyCls);
       // scrollTop lost after set position:fixed, restore it back.
       document.scrollingElement.scrollTop = scrollTop;
       }
       };
       })('modal-open');
       function openModal() {
       document.getElementById('modal').style.display = 'block';
       ModalHelper.afterOpen();
   }
       function closeModal() {
       ModalHelper.beforeClose();
       document.getElementById('modal').style.display = 'none';
       }
       var btns = document.querySelectorAll('.js-open-modal');
       btns[0].onclick = openModal;
       btns[1].onclick = openModal;
       document.querySelector('#modal').onclick = closeModal;
   })
</script>
</html>