DIV 的绝对布局问题!
我用 javascript 延迟显示DIV 并屏幕居中显示
遇到问题:当网页有滚动条的时候,div就不能按着屏幕居中了。
也就是说把滚动条下拉一下DIV 就不屏幕居中了,
请问这个问题该怎么决绝?
达到效果是不管滚动条拉在什么位置DIV总能是居中显示出来的。
这是显示方法
function openFlyBar(){
divFlyBar.style.visibility = "visible ";
divFlyBar.style.top=(document.body.clientHeight-divFlyBar.offsetHeight)/2+ "px ";
divFlyBar.style.left=(document.body.clientWidth-divFlyBar.offsetWidth)/2+ "px ";
}
<div id= "divFlyBar " style= "Z-INDEX:100; VISIBILITY:hidden;POSITION:absolute "> 测试 </div>
延迟显示DIV
<script>
window.setTimeout( "openFlyBar() ",1500);
</script>
[解决办法]
试一下这个:
divFlyBar.style.top=document.body.scrollTop+document.body.offsetHeight/2-divFlyBar.style.width/2
原理:网页滚去的高度+(网页可见区域高/2)-(DIV的高度/2)
[解决办法]
divFlyBar.style.top=(document.body.scrollTop+document.body.clientHeight-divFlyBar.offsetHeight)/2+ "px ";