HTML 如何将滚动条附加到模态框内容中

Question

HTML 如何将滚动条附加到模态框内容中

javascriptcssscrollbarmodal-dialogpinterest

3

我正在创建一个类似Pinterest的页面，其中物品会随着用户滚动垂直流动。当用户点击其中一项时，会打开一个相关内容的模态窗口。目前，这个模态窗口是一个绝对定位的div。

模态窗口和背景（物品列表）都比用户的浏览器高度要长。如何使浏览器上的滚动条表示模态div的高度而不是背景的高度，并在关闭模态窗口时将其设置回来？

我尝试隐藏背景并显示模态窗口，但是当我隐藏模态窗口并显示背景时，它会将页面滚动到最顶部。我想像Pinterest的主页一样保持背景略微可见。

- Harper

2个回答

2

给模态框添加固定高度和CSS属性overflow:scroll。

- aziz punjani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CaptainBli · Accepted Answer

对于模态窗口div，我会这样做：

<div style="background-color: rgba(255,255,255, 0.93);position:fixed;
overflow-x:auto;overflow-y:scroll;bottom:0;left:0;right:0;top:0;
z-index:9999;"></div>

它创建了一个填满整个文档的div，然后为中间内容添加了滚动条。一旦显示模态框，您需要将页面的主体（背景）设置为：

style="overflow:hidden"

您可以使用jQuery来实现，示例如下：

$("body").css("overflow", "hidden");

为了去除其他滚动条，将主体设置overflow为hidden非常重要。我在Firefox中测试过，它是有效的。我有一个如上所述的div，然后设置了body样式，它起作用了。当我测试时，我也在文档的中间位置。背景文档保持原位不动。