如何使一个 position: absolute; 的对话框在页面滚动时初始出现在视口内，而不管页面滚动到哪里？

4 浏览
0 Comments

如何使一个 position: absolute; 的对话框在页面滚动时初始出现在视口内，而不管页面滚动到哪里？

每次显示时，我希望对话框

出现在视口中，而不使用position: fixed;。实际上，在下面的示例中，当点击“显示”按钮时，我希望对话框出现在它将出现的位置，但我希望它的位置是绝对的。或者换句话说，我“...希望它被定位为固定的，然后在放置后立即停止固定”（感谢apsillers）。我希望它的position: absolute;，这样我仍然可以在浏览器中滚动，但当它首次显示时，它仍然会出现在视口中。

我尝试了很多不同的CSS，来自这里，这里和这里，但没有一个似乎符合我的要求。请注意，我不能使用JQuery或其他JS库。

.dialog {
  position: absolute;
}

  对话框

0

3 答案

0 Comments

问题出现的原因：用户想要在页面滚动时，无论页面滚动到什么位置，都希望初始出现的对话框能够在可视区域内。

解决方法：使用position: fixed替代absolute或relative。

position: fixed表示元素相对于浏览器窗口进行定位。

编辑

没有意识到你说你不想这样做，请解释原因。

0
0 Comments

问题原因：页面滚动时，使用position: absolute;的对话框可能会出现在视口之外。

解决方法：将对话框的代码放在html和body元素之间，并添加以下CSS样式：html,body{position:relative;height:100%}。这样对话框将始终在视口内显示。

0
0 Comments

问题的出现原因：需要在页面滚动的情况下，让position为absolute的对话框始终在视口内显示。

解决方法：可以使用绝对定位的对话框，并跟踪滚动位置。可以添加一个滚动事件监听器，在滚动时获取滚动的距离，并将对话框的top属性设置为滚动距离的像素值。代码如下：

document.addEventListener('scroll', function(){
     var body = document.body;
     var top = body.scrollTop || body.parentElement.scrollTop;
     document.getElementById('#yourPoupUp').style.top = top + 'px';
});

（如果需要支持旧版的IE浏览器，还可以使用document.attachEvent()添加相同的事件处理程序）

然而，我不推荐使用这种方法。如果可能的话，最好使用position:fixed。

很好的回答！对于我具体的例子，我只需要在显示对话框的任何按钮的onclick事件中运行这段代码。不确定，但可能值得修改示例以反映这一点。

0