I am working on an HTML file
<html>
<body>
<div #main> <a click to open lightbox> <img> <more images> </a> </div>
</body>
</html>
After the lightbox opens, the code looks like this:
<html>
<body>
<div id="main"> <a click to open lightbox> <img> <more images> </a> </div>
<div id="pic_holder">...Popup div content </div>
<div id="overlay"></div>
</body>
</html>
I am trying to make #main no scroll. I have tried using CSS properties like overflow:hidden and position:static. My CSS code includes .noscroll{}.
The issue is that even if I apply overflow:hidden to #main to prevent scrolling, the body still scrolls. And when I use position:static on #main, the body scrolls back to the top after the popup is closed. I want to achieve a Pinterest-like behavior and I am using prettyphoto.
If you have any tips or suggestions, please let me know. This problem is somewhat related to Preventing div scrolling back to top when changing position to fixed, but it doesn't address the specific issue of adding a lightbox.