许多问题已被问及有关类似主题的答案,但我无法在任何地方找到这个问题的确切答案。另外,鉴于它是2018年,我想知道是否有任何新的方法可以实现我所寻找的目标。
基本上,我的<div>
内容超出了高度,因此需要滚动。其中<div>
是一个等待或加载模式,在下载新数据时覆盖它。它工作正常,除非用户向下滚动,并且绝对定位的div(100%)固定在内容的顶部。
我尝试使用top
和bottom
以及父母和孩子的多个position
和display
变体,但没有运气。
以下是包含所有相关代码的jsfiddle:https://jsfiddle.net/wmu7ghmm/2/。
有什么想法吗?
答案 0 :(得分:1)
只需让用户滚动到顶部即可。
<强> HTML 强>
<div class="container" id="container">
<div id="wait-modal" class="waiting" style="display:none"></div>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
<p>This is a bunch of text, over and over again.<p>
</div>
<br>
<button onclick="document.getElementById('wait-modal').style.display='block';document.getElementById('container').classList.add('no-scroll');document.getElementById('container').scrollTo({top:0})">
Load Data
</button>
<强> CSS 强>
.container {
width:300px;
height:300px;
max-height:300px;
overflow-y:scroll;
background-color:#dedede;
position:relative;
}
.container.no-scroll {
overflow: hidden;
}
.waiting {
position:absolute;
height:100%;
width:100%;
color:white;
text-align:center;
padding-top:20px;
background-color:rgba(0,0,0,0.5);
transition:background-color 250ms ease;
}
.waiting:hover {
background-color:rgba(0,0,0,0.35);
transition:background-color 250ms ease;
}
.waiting:after {
content:'PLEASE WAIT...';
font-size:30px;
}
答案 1 :(得分:0)
将其从容器中取出并将其绝对放置在容器上,其尺寸与容器完全相同。
.waiting {
position:absolute;
z-index:10;
width:300px;
height:300px;
max-height:300px;
color:white;
text-align:center;
padding-top:20px;
background-color:rgba(0,0,0,0.5);
transition:background-color 250ms ease;
}