Question

对于移动网络应用程序，在某个用户操作（例如照片上传）后，我使用预加载器渲染半透明覆盖图以覆盖屏幕。

但是，我发现id为滚动，覆盖不会覆盖滚动区域。对于我来说，一个好的解决方法是在over + preloader渲染时添加document.body.style.overflow = 'hidden';。随后，一旦预加载器结束（例如，在Ajax请求完成时），我会document.body.style.overflow = 'visible';。

我的问题是叠加+预加载器附加在屏幕顶部（由于position:absolutel;top:0;）。如果屏幕稍微滚动，该对仍然会附着到顶部，留下一些部分未被覆盖。

我认为我可以为预加载器和叠加层更改position到relative以解决此问题。不幸的是，这导致他们完全消失。

即使所述屏幕稍微滚动，我如何确保覆盖+预加载器对覆盖整个屏幕？

以下是CSS的外观：

<!-- overlay -->
.ld_ol{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  opacity:0.6;
  z-index:100;
  background-color:#FFFFFF;
}   

<!-- preloader -->
.load{
  position:absolute;
  top:50%;
  z-index:101;
  left:50%;
  transform:translate(-50%, -50%);
  width:50px;
  height:50px;
}
.load hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite}

.load :first-child{background:#6092F8;animation-delay:-1.5s}
.load :nth-child(2){background:#FFD332;animation-delay:-1s}
.load :nth-child(3){background:#00F5BB;animation-delay:-0.5s}
.load :last-child{background:#DD2E44}

@keyframes spin{
  0%,100%{transform:translate(0)}
  25%{transform:translate(160%)}
  50%{transform:translate(160%, 160%)}
  75%{transform:translate(0, 160%)}
}

以下是我如何使用纯JS来调用overlay + preloader：

function personal_group_preloader(action) { 
  if (action=='create') {
    var overlay = document.createElement('div');
    var preloader = document.createElement('div');
    overlay.id = "personal_group_overlay";
    overlay.className = 'ld_ol';
    preloader.id = "personal_group_preloader";
    preloader.className = 'load';
    preloader.innerHTML = '<hr/><hr/><hr/><hr/>';
    document.body.appendChild(preloader);
    document.body.appendChild(overlay);
    document.body.style.overflow = 'hidden';
  } else {
    var overlay = document.getElementById("personal_group_overlay");
    var preloader = document.getElementById("personal_group_preloader");
    overlay.parentNode.removeChild(overlay);
    preloader.parentNode.removeChild(preloader);
    document.body.style.overflow = 'visible';
  }
}

注意：我的首要任务是通过传统的CSS实现这一目标，而不是冒险进入JS。

Answer 1

如果我理解您的问题，则无论屏幕高度如何，您都希望覆盖整个屏幕。如果是这样，请使用

position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%

如果我误解了，请告诉我。

来自MSDN docs：已修复 - 该元素已从正常文档流中删除;没有为页面布局中的元素创建空间。相反，它相对于屏幕的视口定位，滚动时不会移动。

Answer 2

Dim result = bring_it(x)
txtWorkOrder.Text = result.WorkOrder
txtPTW.Text = result.PTW

这个css元素应覆盖整个屏幕，无论其大小为z-index + display：block都会确保它保持在其他元素之上

根据屏幕滚动调整CSS叠加的位置

2 个答案: