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,然后设置身体风格,它工作.当我测试时,我也在文档的中间.背景文件保持原样并且没有移动.