我正在创建一个类似于 Pinterest 的页面，其中项目在用户滚动时垂直流动。当用户单击其中一项时，会打开一个包含相关内容的模式。目前，模态是一个绝对定位的 div。
模式和背景（项目列表）都比用户的浏览器高度长。如何使浏览器上的滚动条代表模态 div 的高度而不是背景的高度，然后在模态关闭时将其设置回来？
我尝试隐藏背景并显示模式，但是当我隐藏模式并显示背景时，它会再次滚动页面。我想让背景稍微可见，就像在 Pinterest 的主页上一样。
问问题
14103 次
2 回答
5
我会为模态 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，然后设置了主体样式并且它起作用了。当我测试它时，我也在文档的中间。背景文件停留在原处，没有移动。
于 2012-04-24T20:32:25.587 回答
2
给模态 div 一个固定的高度和一个 css 属性overflow:scroll
于 2012-04-20T00:56:56.927 回答