时间戳

首页 > 解决方案 > 垂直居中绝对div？

html - 垂直居中绝对div？

问题描述

我有一个 div，它是一个在屏幕中央打开的小模式。它曾经是fixed定位的，但由于移动浏览器不支持absolute固定，所以我做了它。

当用户向下滚动时，此模态位置将是错误的，因为它按预期随页面滚动。我需要这种fixed行为。

如何确保无论我向下滚动多少，模态都保持在中间？

.whiteBox{
  visibility: hidden;
  position:absolute;
  overflow: hidden;
  width: 94vw;
  height: auto;
  background-color:  rgba(255,255,255,1.0);
  left: 100vw;
  top:7%;
  border-radius: 4vw;
  opacity: 0.0;
  transition: all 0.55s ease;
  z-index: 1000;
 }

 .whiteBox.show{
    left: 3vw;
    opacity: 1.0;
    visibility: visible;
 }

身体relative定位。

我正在考虑的一个选择是在 JS 上将 scrollTop 添加到他的top样式中。但是由于它是从右到左的动画，如果我动态添加顶部位置，动画会看起来很糟糕。

div.style.top=50+document.body.scrollTop +"px";

标签： htmlcss

解决方案

这是我的解决方案，适用于任何在移动设备上苦苦挣扎的人：

当用户滚动时，我想重新定位所有模态，以便它们准备好动画，所以当滚动停止时，我会更新它们的顶部位置。

 window.onscroll = function() {adjustmodals()};

 var isScrolling = null;
 function adjustmodals() {

        window.clearTimeout( isScrolling );
        isScrolling = setTimeout(function() {

         //lop all modals
          for (key in menuBox){
            var div = document.getElementById(key);
            console.log(div);
             div.style.top=50+document.body.scrollTop +"px";
          }

         }, 66);
}

推荐阅读