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

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，然后设置主体样式并且它起作用了。我测试的时候也在文档中间。背景文件原地不动。