I am working on creating a dynamic image gallery for browsers that support Javascript. The gallery consists of thumbnails that lead to full-size photos displayed in a table layout, complete with navigation links and captions. This table is centered using fixed positioning, with an opaque overlay sandwiched between it and the rest of the page content. I have also disabled scrolling on the body tag while keeping the table within it.
Now, my challenge lies in allowing scroll functionality for the gallery when the window size is smaller than the dimensions of the image, especially since body scrolling is disabled. While I am aware that HTML tables lack their own scroll properties, I have enclosed it within a div together with the opaque overlay. Would switching from fixed positioning to absolute positioning for the gallery table help to resolve this issue?
I have the knowledge to calculate window size and compare it against element dimensions using Javascript to identify when such a situation occurs, so I can catch these instances.