博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css+js定位到屏幕中间
阅读量:5286 次
发布时间:2019-06-14

本文共 1030 字,大约阅读时间需要 3 分钟。

ex:让一个div始终显示在屏幕中间

一、

css:#idName{position: absolute;z-index: 999;width: ?px;margin-top: ?px;}//此处的初始定位按具体的自己调

计算并设置页面滚动条改变时移动的距离:

function sc1(idName) {

    var d = document.getElementById(idName);
    d.style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - d.offsetHeight) / 2) 【此处加上或减去上移或者下移的高度】+ "px";
    d.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
}

 

    function scall() {

        sc1("idName");
        }

            window.onscroll = scall;

            window.onresize = scall;
            window.onload = scall;

 

若是和diaplay一起使用  在显示后再调用             

            window.onscroll = scall;

            window.onresize = scall;

 二、纯css实现始终显示在屏幕中间

ex:

#div_window {

    width: 400px; /**宽度**/
    height: 300px; /**高度**/
    position: fixed; /**定位采用此种方式**/
    left: 50%; /**左边50%**/
    top: 50%; /**顶部50%**/
    margin-top: -100px; /**上移-50%**/
    margin-left: -150px; /**左移-50%**/
    display: none;
    border: 1px black solid;
    
}

样式和宽高自己定,根据宽高调整margin-top,margin-left  将它调到页面中间即可。滚动时便会根据位置显示在屏幕中间。

 

转载于:https://www.cnblogs.com/allenzhang/p/6813060.html

你可能感兴趣的文章
成员内部类 局部内部类 匿名内部类
查看>>
[7] 算法之路 - 高速排序之3轴演算
查看>>
PHP查询MySQL大量数据的内存占用分析
查看>>
git批量删除分支
查看>>
LaTex Font Size 字体大小命令
查看>>
[LeetCode] 1028. Recover a Tree From Preorder Traversal 从先序遍历还原二叉树
查看>>
client offset scroll
查看>>
从关系型数据库到非关系型数据库
查看>>
03_10_Object类的toString equals等方法
查看>>
python之三层菜单递归
查看>>
Flink学习笔记:Time的故事
查看>>
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
查看>>
Handler对象
查看>>
spring注入
查看>>
eclipse添加xsd
查看>>
域名空间那些事 第二季
查看>>
【2007-4】【鹅卵石图案】
查看>>
利用余数选择特殊位置元素
查看>>
position-relative 的问题
查看>>
浏览器视口宽度高度的封装
查看>>