Question

我正在创建一个类似于Pinterest的页面，其中项目在用户滚动时垂直流动。当用户单击其中一个项目时，将打开包含相关内容的模式。目前，模态是一个绝对定位的div。

模态和背景（项目列表）都比用户的浏览器高度长。如何使浏览器上的滚动条代表模态div的高度而不是背景的高度，然后在模态关闭时将其设置回来？

我试图隐藏背景并显示模态，但是当我隐藏模态并显示背景时，它会一直向上滚动页面。我想保持背景略微可见，就像在Pinterest的主页上一样。

Answer 1

我会为模态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");

让主体将溢出设置为隐藏以删除其他滚动条非常重要。当我在Firefox中测试它时，它工作。我有一个描述的div，然后设置身体风格，它工作。当我测试时，我也在文档的中间。背景文件保持原样并且没有移动。

Answer 2

给模态div一个固定的高度和一个overflow:scroll

的css属性

HTML将滚动条附加到模态内容

2 个答案: