search

willmcpo / body-scroll-lock

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

Add setting --body-padding-right to be able to compensate width of fixed elements #152

Open f0rmat1k opened 4 years ago

f0rmat1k commented 4 years ago

Hi!

Padding-right on the body isn't enough to remove flickering. If you have full-width backgrond or any fixed blocks with left: 0; right: 0 you still have flickering. I tried to put setting css var after and before calling disableBodyScroll but in reason you set padding in setTimeout, i still got flickering. So the only way is to set it immediately after calling document.body.style.paddingRight=. When i did it, flickerings disappeared.

f0rmat1k commented 4 years ago

Is there anyone alive?

diachedelic commented 4 years ago

Rather than setting a CSS variable, could the reserveScrollBarGap option accept a function, which could then be called with the updated scrollBarGap? E.g.

disableBodyScroll(targetElement,  {
  reserveScrollBarGap: ({ scrollBarGap }) => {
    myElement.style.right = `${scrollBarGap}px` 
  ,
});

Could that work?

Also, looks like you've modified lib/bodyScrollLock.js, but you really need to make your change to src/bodyScrollLock.js

n19htz commented 4 years ago

got the same problem, my modal with position: fixed left: 0, right: 0, the flickering occurs no matter of reserveScrollBarGap: true, how to fix it?