Link to home
Start Free TrialLog in
Avatar of satmisha
satmishaFlag for India

asked on

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

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.
Avatar of Mrunal
Mrunal
Flag of India image

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;
}
Avatar of satmisha

ASKER

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'
                });
ASKER CERTIFIED SOLUTION
Avatar of satmisha
satmisha
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial