关于body添加position:fixed会返回到网页顶部的问题

来源：互联网发布：软件手术刀怎么用编辑：程序博客网时间：2024/05/16 23:32

做网页免不了遇到弹窗，遮罩层这些页面，当有遮罩层的时候需要禁止底层页面滑动，本来使用event.stopPropagation();阻止事件冒泡在安卓端就是可以实现的，但是在ios上这个并不起作用。

所以为了方便在弹出遮罩层的同时给body设置'position':'fixed';'top':'负的当前浏览器顶部距离页面顶部距离';此时，点击遮罩层的时候底层页面不动且页面位置正好；但是点击遮罩层蒙版的灰板时网页依旧会返回到页面的顶部；

所以，可以将“当前浏览器顶部距离页面顶部距离”设置成一个全局变量，当遮罩层消失的时候让滚动条向上滚动“当前浏览器顶部距离页面顶部距离”，即可实现既定效果。

代码如下：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
       ul,li{
           list-style: none;
       }
       li{
           display: block;
           width: 100%;
           height: 0.8rem;
           font-size: 0.25rem;
           background: salmon;
           border-bottom: 1px solid aqua;
       }
       input{
           width: 1.5rem;
           height: 0.88rem;
           font-size: 0.45rem;
       }
       #men{
           display: none;
       }
       #menbg{
           position: fixed;
           width: 100%;
           height: 100%;
           background: black;
           opacity: 0.7;
           left: 0;
           top: 0;
           z-index: 2;
       }
       #con{
           width: 80%;
           height: 5rem;
           background: white;
           position: fixed;
           z-index: 3;
           top: 1rem;
           left: 10%;
       }
   </style>
   <script type="text/javascript">
    document.documentElement.style.fontSize=document.documentElement.clientWidth/7.5+'px';
</script>
   <body>
       <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
           <li>5</li>
           <li>6</li>
           <li>7</li>
           <li>8</li>
           <li>4d</li>
           <li>5d</li>
           <li>6d</li>
           <li>7f</li>
           <li>8f</li>
           <input type="button" name="" id="" value="dfdfaf" />
           <li>9</li>
           <li>a</li>
           <li>b</li>
           <li>c</li>
           <li>d</li>
           <li>e</li>
           <li>f</li>
           <li>g</li>
           <li>h</li>
           <li>i</li>
       </ul>

       <div id="men">
           <div id="menbg">

           </div>
           <div id="con">

           </div>
       </div>
   </body>
   <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       $(function(){
           var top;
           $('input').click(function(){
               top = $(window).scrollTop();
               $('#men').show();
               $('body').css({
                   'position':'fixed',
                   'width':'100%',
                   'top':-top
               })
           });
           $('#menbg').bind('touchstart',function(){
               $('#men').hide();
               $('body').css({
                   'position':'static'
               })
               $(window).scrollTop(top)
           })
       })
   </script>
</html>
如果各位大神有可以解决event.stopPropagation();在安卓和iOS上兼容性问题的，期望指教；

有其他更加便捷的实现方法的也同样希望不吝赐教。

阅读全文

0 0