我试图创建一个使用窗口滚动条而不是div滚动条的弹出窗口。类似http://pinterest.com上的内容。如何实现这种效果?我所有的尝试都不成功,滚动条出现在div上。窗口scollbars滚动身体内容。
答案 0 :(得分:3)
当你打开弹出窗口时,你应该记住当前窗口scrollLeft / scrollTop位置,然后将overflow:hidden
,height/width:100%
应用于html和body,这将阻止页面滚动。
使用div
,position:absolute
,z-index:9999
,left/top:0
,height/width:100%
创建叠加层overflow:auto
,并将其附加到正文 - 它将是弹出窗口的可滚动容器。
在此容器内创建div
position:absolute
和left/top
值,以js计算,以便在必要时居中。
关闭弹出窗口后,为html / body恢复overflow
,height/width
个样式,并应用在打开弹出窗口之前保存的scrollLeft / scrollTop值。