Whenever I click a thumbnail, a div overlay box appears on top:
.view-overlay {
display:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
overflow-y:scroll;
background-color:rgba(0,0,0,0.7);
z-index:999;
}
Some browsers with non-floating scrollbars may disable scrolling and cause content to shift to the right slightly. I want to prevent this from happening by keeping the scrollbar visible.
Although there are online solutions available, none have provided a definitive fix that works seamlessly across all browsers.
- This solution is effective in Chrome but has glitches in Safari OSX 10.10.
- This solution causes the body to scroll back to the top in Chrome.
Is there a solution that:
a) Disables body scroll when the overlay is opened
b) Maintains the body's original scroll position
c) Keeps the scrollbar visible to prevent content shifting
d) Works without glitches in most, if not all, browsers?
For example, implements this functionality effectively without glitchy behavior in various browsers tested (including Safari).