Content in the target not scrolling

[paragonn]

I implemented the script on a plain vanilla js config and it is successfully locking the body scroll, however the content in the target is not scrolling. Their are 4 pages (slides) inside the target as part of a stepped form. The second step in the form is larger than the mobile screen size however it is not scrolling. You can see a demo here: https://dev.ijm.org and click on the red Give button. Help would be greatly appreciated!

[diachedelic]

Can you try using the allowTouchMove option?

[paragonn]

Thanks @diachedelic -- I applied the allowTouchMove to the #draw1-wrap div and the scroll now works, however the body unfortunately scrolls too?

[diachedelic]

Can you paste your allowTouchMove function here?

[paragonn]

Sure thing @diachedelic, here it is:

disableBodyScroll(targetElement, {
  allowTouchMove: el => (document.querySelector("#draw1-wrap"))
});  

[diachedelic]

allowTouchMove expects a boolean, try this:

disableBodyScroll(targetElement, {
  allowTouchMove: el => (el === document.querySelector("#draw1-wrap"))
}); 

[paragonn]

Thanks @diachedelic -- The body scroll lock is now working again, however the content on page/slide 2 is not vertical scrolling. Do you think it could have something to do with a styling in the css?

[retailonline]

Same problem here.

[diachedelic]

@paragonn #draw1-wrap is possibly not the correct element to target, or you need to target other elements too - make sure you target all elements which have overflowing content.

[diachedelic]

Looking at your demo, try targeting div.drawer instead

[paragonn]

Thanks for your assistance @diachedelic -- I tried your recommendation and overflow content still does not vertical scroll. Here is the code for the current staging (dev.ijm.org) of the problem:

disableBodyScroll(targetElement, {
  allowTouchMove: el => (el === document.querySelector("#draw1-wrap"))
});   

Where the targetElement is defined like so:

const targetElement = document.querySelector("#draw1");

Do you have any other recommendations?

[diachedelic]

I see you've used the body-scroll-lock-ignore attribute - for that attribute to work, you need to adjust your allowTouchMove function like

  disableBodyScroll(container, {
    allowTouchMove: el => {
      while (el && el !== document.body) {
        if (el.getAttribute('body-scroll-lock-ignore') !== null) {
          return true
        }
  
        el = el.parentNode
      }
    },
  });

And you can safely remove body-scroll-lock-ignore from all the children elements - you only need it on the outermost scrolling element, all elements within will automatically be allowed to scroll.

[diachedelic]

So just leave it on #draw1-wrap like <div id="draw1-wrap" body-scroll-lock-ignore> (doing body-scroll-lock-ignore="" might do the opposite of what you want...)

[limaneto]

If there is a parent between body and target's parent, and that parent has overflowing content, is it going to work? Or the scroll lock should be applied on the component inside that between parent?

[diachedelic]

@limaneto I'm having a hard time visualising your issue, could you post a JS Fiddle or something?

[limaneto]

do you guys have any live example with React?

[diachedelic]

I have no idea, I'll wait for someone else to answer that

On 16 Jul 2019, at 10:34 am, Lima Neto [email protected] wrote:

do you guys have any live example with React?

— 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/100?email_source=notifications&email_token=AACLZQHQOZY3P47L24MFPATP7UJSVA5CNFSM4HDV7MXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZ7K5TQ#issuecomment-511618766, or mute the thread https://github.com/notifications/unsubscribe-auth/AACLZQEWWGBDWNSPEPA2WK3P7UJSVANCNFSM4HDV7MXA.

[bobberg]

For the people that still have this problem after trying the fix... Try destroying the body and turning the div into the body dynamically. And add a close button that reloads the page. Hacky, but works perfectly in my project.

[llausa]

Used this package in React, added the attribute to the component as a prop.

The rest of the code was as suggested by the Documentation.

To get this working, we grabbed the component through a class and <className>.setAttribute('body-scroll-lock-ignore', 'true') within componentDidUpdate()

Keep in mind you could do the same with ID, jsut replace the code above with ID instead of Class stuff, etc

Might help out some of you :smiley:

[abeledovictor]

@llausa mind creating a small snippet/code sandbox for react?

I'm struggling with the same problem, for now, I avoided using the scroll lock in just one view where I have a drawer where I need the scroll