解决因动态隐藏滚动条导致屏幕水平抖动问题

这里面有一些小技巧：得到滚动条宽度，动态添加padding值。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
*{margin:0;padding:0;border:0;background: #ccc;}
.ston_wrap{width:100%;height:10000px;}
.ston_box{width:500px;height: 600px;position:fixed;top:50%;margin-top: -300px;left: 50%;margin-left: -250px;background: #aaa;display: none;}
.ston_container{height: 1000px;width: 980px;margin:0 auto;background: #ffd;}
.ston_bigbox{width: 100%;overflow: hidden;box-sizing:border-box;}

    </style>
</head>
<body>
<div class="ston_bigbox" id="ston_bigbox">
    <div class="ston_wrap" id="ston_wrap">
        <div class="ston_btn" id="ston_btn"><a href="javascript:void(0)">打开</a></div>
        <div class="ston_container">


        </div>
    </div>

    <div class="ston_box" id="ston_box">
        <div class="ston_btn" id="ston_btn_close"><a href="javascript:void(0)">关闭</a></div>
        <h1>窗口内容</h1>
    </div>
</div>
<script type="text/javascript">
window.onload=function(){
    function getScrollWidth() {
      var noScroll, scroll, oDiv = document.createElement("DIV");
      oDiv.style.cssText = "position:absolute; top:-1000px; width:100px; height:100px; overflow:hidden;";
      noScroll = document.body.appendChild(oDiv).clientWidth;
      oDiv.style.overflowY = "scroll";
      scroll = oDiv.clientWidth;
      document.body.removeChild(oDiv);
      return noScroll-scroll;
    };
    var ston_width=getScrollWidth();
    console.log(ston_width)
    var ston_box,ston_body,ston_btn,ston_wrap,ston_bigbox;
    ston_box=document.getElementById('ston_box');
    ston_btn=document.getElementById('ston_btn');
    ston_wrap=document.getElementById('ston_wrap');
    ston_bigbox=document.getElementById('ston_bigbox');
    ston_btn_close=document.getElementById('ston_btn_close');
    ston_body=document.body;
    ston_btn.onclick=function(){
        ston_body.style.overflowY='hidden';
        ston_bigbox.style.paddingRight=ston_width+'px';
        ston_box.style.display='block';
    };
    ston_btn_close.onclick=function(){
        ston_box.style.display='none';
        ston_bigbox.style.paddingRight=0;
        ston_body.style.overflowY="scroll";
    };
}
</script>
</body>
</html>

 

posted on 2016-05-31 17:05  Newbies  阅读(352)  评论(0)    收藏  举报

导航