弹出窗口使用滚动条 [英] Popup use scrollbar of window

问题描述

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

解决方案

当您打开弹出窗口时，应该记住当前窗口的scrollLeft / scrollTop位置，对HTML和正文应用 overflow：hidden ， height / width：100％ p>

使用位置：绝对，<$ c创建叠加 div $ c> z-index：9999 ， left / top：0 ， height / width：100％， overflow：auto ，并将其附加到body - 它将是您的弹出窗口的可滚动容器。

这个容器里面用 position：absolute 和 left / top创建 div

关闭弹出窗口后，请恢复 overflow ， height / width html / body的样式，并应用在打开弹出窗口之前保存的scrollLeft / scrollTop值。

I'm trying to create a popup which uses window scrollbars not the div ones. Something like what is on http://pinterest.com. How to achieve this effect? All my tries are unsuccessful, scrollbars appear on div. Window scollbars scroll the body content.

解决方案

When you open popup window, you should remember current window scrollLeft/scrollTop positions somewhere, then apply overflow:hidden, height/width:100% to html and body, which will prevent page scrolling.

Create overlay div with position:absolute, z-index:9999, left/top:0, height/width:100%, overflow:auto, and append it to body - it will be scrollable container of your popup.

Inside of this container create div with position:absolute and left/top values, calculated in js to center it if necessary.

After you close popup, restore overflow, height/width styles for html/body, and apply scrollLeft/scrollTop values that were saved before opening popup.

这篇关于弹出窗口使用滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！