scroll和offset实现元素居中

深碍√TFBOYSˉ_ 2022-01-29 13:25 224阅读 0赞

## 元素居中 ##

html
    <body style="height: 2000px;">
        <button>显示</button>
        <div><button>X</button></div>

css
     div{width: 200px;height: 200px;border: 2px solid red;position: absolute;display: none;}
            div button{float: right;}

script
     window.onload = function () {
                //1.获取元素
                var oBut = document.getElementsByTagName("button");
                var oDiv = document.getElementsByTagName("div")[0];
    
                //2.点击显示按钮，显示div，并且div居中
                oBut[0].onclick = function () {
                    oDiv.style.display = "block";
                    //(屏幕的可视化宽度  -  当前div的真实占位宽度)/2
                    oDiv.style.left = document.documentElement.clientWidth/2-oDiv.offsetWidth/2+"px";
                    
                    oDiv.style.top = document.documentElement.clientHeight/2-oDiv.offsetHeight/2+"px";
                }
    
                  //3.点击关闭按钮，隐藏div
                oBut[1].onclick = function () {
                    oDiv.style.display = "none";
                }
                
                //4.滚动的时候，设置div居中
                window.onscroll = function () {
                    //获取被卷去的高（滚动距离）
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    //获取屏幕的宽度
                   var clientWidth = document.documentElement.clientWidth;
                    oDiv.style.left = clientWidth/2-oDiv.offsetWidth/2+"px";
                    oDiv.style.top = document.documentElement.clientHeight/2-oDiv.offsetHeight/2+scrollTop+"px";
                }
                //5.改变窗口
                //窗口的宽高发生了变化  就会来去执行这个方法
                window.onresize = function () {
                	console.log('窗口发生了改变')
                    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                    oDiv.style.left = document.documentElement.clientWidth/2-oDiv.offsetWidth/2+"px";
                    oDiv.style.top = document.documentElement.clientHeight/2-oDiv.offsetHeight/2+scrollTop+"px";
                }
    
            }

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: /images/20220129/d4efe89eba604f11a02ddf99cc898315.png