willmcpo / body-scroll-lock

Body scroll locking that just works with everything 😏
MIT License
4.04k stars 337 forks source link

Reserve scrollbar width on disableBodyScroll #80

Open YCMitch opened 5 years ago

YCMitch commented 5 years ago

I can see there's a reserveScrollBarGap option available in the options passed to enableBodyScroll, but not in disableBodyScroll?

I feel like logically you'd want to reserve the scrollbar's gap when disabling body scroll (i.e, opening a modal), right?

We haven't ever had a need to use enableBodyScroll, as we'd either disable it, or clear all locks. Is there a way of preserving scrollbar gap outside of when enabling scrolling?

StanAngeloff commented 5 years ago

The documentation is confusing. You do in fact set { reserveScrollBarGap } as an option to disableBodyScroll. See the code which gets called by disableBodyScroll. enableBodyScroll by contrast doesn't take any options.

YCMitch commented 5 years ago

Hmm. @StanAngeloff I can put reserveScrollBarGap in as an option, but it doesn't do anything.

const element = document.getElementById('modal')

disableBodyScroll(element, {
    reserveScrollBarGap: true
})

Is the above a correct implementation? The page still jumps to the side as the scrollbar's removed - it doesn't seem to have made any difference.

YCMitch commented 5 years ago

Oh! Hang on - it does work. It's just if you're using a fixed-position div, it'll of course ignore the padding on <body>, making it a little useless for modals and whatnot.

Thanks for your help.

chpio commented 5 years ago

yeap, it really is useless for modals. @MitchEff do you have a workaround for that?

YCMitch commented 5 years ago

Mmmnot really. I ended up just hiding the scrollbars with CSS for modals - it's pretty apparent that you need to scroll if it's taller than the screen.

On Wed, 29 May 2019, 12:36 am chpio, notifications@github.com wrote:

yeap, it really is useless for modals. @MitchEff https://github.com/MitchEff do you have a workaround for that?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/willmcpo/body-scroll-lock/issues/80?email_source=notifications&email_token=AIICZZV6GRAGT362ISOHTWDPXVGPBA5CNFSM4GIIE7ZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWMQ5VA#issuecomment-496570068, or mute the thread https://github.com/notifications/unsubscribe-auth/AIICZZUVK2566HVLSLSK4HDPXVGPBANCNFSM4GIIE7ZA .