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

HTML Attach Scrollbar to Modal Content

本文关键字：模式 滚动条 HTML      更新时间：2023-09-26

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

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

我尝试隐藏背景并显示模态，

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

我会为模态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，然后设置了车身样式，它起作用了。 当我测试它时，我也在文档的中间。 背景文件原地不动。

为模态div 提供固定高度和 css 属性 overflow:scroll

相关文章：