弹出窗口使用滚动条

时间:2014-03-25 12:57:52

标签: javascript css scrollbar

我试图创建一个使用窗口滚动条而不是div滚动条的弹出窗口。类似http://pinterest.com上的内容。如何实现这种效果?我所有的尝试都不成功,滚动条出现在div上。窗口scollbars滚动身体内容。

1 个答案:

答案 0 :(得分:3)

当你打开弹出窗口时,你应该记住当前窗口scrollLeft / scrollTop位置,然后将overflow:hiddenheight/width:100%应用于html和body,这将阻止页面滚动。

使用divposition:absolutez-index:9999left/top:0height/width:100%创建叠加层overflow:auto,并将其附加到正文 - 它将是弹出窗口的可滚动容器。

在此容器内创建div position:absoluteleft/top值,以js计算,以便在必要时居中。

关闭弹出窗口后,为html / body恢复overflowheight/width个样式,并应用在打开弹出窗口之前保存的scrollLeft / scrollTop值。