I'm currently facing an issue with the scroll bars in the browser while using custombox.js in combination with BS4.
Let me provide some context:
I am working with a Custombox modal, which is similar to a BS4 modal. When a modal is opened in BS4, a class is added to the body tag called .modal-open, which prevents scrolling by hiding the scrollbar.
This behavior of hiding the browser's scroll feature while the modal is open sometimes results in jitters, which is not desirable.
To address this issue, I came up with the following solution:
/* Custom Box Lock */
.custombox-lock {
position: fixed;
left: inherit;
overflow-y:scroll !important;
}
This new class ensures that the scrollbar remains visible while locking the user in place to disable scrolling.
The Dilemma
However, applying this class causes the user to jump to the top of the page when the modal opens, which is far from ideal.
I tried using inherit: left; to maintain the scroll position, but unfortunately, it did not work as intended.
Question: Is there a simpler way to achieve the desired result without complicating things further?