How to prevent scroll bar to disposition popover using javascript or JQuery

satmisha
satmisha used Ask the Experts™
on
Hi Experts,

Steps to reproduce:

1. Open link fiddle
2. click on popover button.
3. popover appears, drag this to the bottom till vertical scroll bar appears.
4. drag down the vertical scroll bar than popover will go back under the button.
5. click again button, the popover will disappear.
6. Click again on button, the popover will appear to the location where the user left it earlier.

expected behavior: when a user drags down vertical scroll bar, popover should not go under the button rather stays there exactly where it is left.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi
that logic is written in third party JS file you have included for popup.
Can you please try below:

Add your popup triggering button inside DIV tag and add below CSS to it.

.containerPopup {
    display:block;
    overflow:hidden;
}

Author

Commented:
Thanks, Mrunal, appreciate your comment though I have identified solution by my own though you're also nears to that.

I am with the help JQuery Adding this to get away from the scroll
$('html, body').css({
                    overflow: 'hidden',
                    height: '100%'
                });
and using below to bring back the effect when done with that

function () {
                $('html, body').css({
                    overflow: 'auto',
                    height: 'auto'
                });
Commented:
mentioned above.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial