Popup use scrollbar of window

问题:

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.

回答1:

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.