Popup use scrollbar of window

Question

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.

Answer 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.