title: Locking the body scroll, blocks target element scrolling
body: <p>I am using the following library for locking scrolling of the body of page and only allow scrolling on my modal if it is open.</p>
  <p><a href="https://www.npmjs.com/package/body-scroll-lock" rel="nofollow noreferrer">https://www.npmjs.com/package/body-scroll-lock</a></p>
  <p>My modal <code>AddItemModal</code> is a portal so inside <code>index.html</code> file I have this.</p>
  <pre><code>&lt;body&gt;
    &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;div id=&quot;add-item-modal&quot;&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>NavigationIcons component (where modal is opened)</p>
  <pre><code>const NavigationIcons = (props) =&gt; {
    let targetElement = document.getElementById(&quot;add-item-modal&quot;);
  
    useEffect(() =&gt; {
      ...
      return () =&gt; clearAllBodyScrollLocks();
    }, []);
  
    const renderAddItemModal = () =&gt; {
      if (props.addItem) {
        disableBodyScroll(targetElement);
        return &lt;AddItemModal /&gt;;
      }
    };
  
    return (
      &lt;div className=&quot;main-4&quot; onClick={() =&gt; props.openAddItemModal()}&gt;
        {renderAddItemModal()}
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>AddItemModalHeader component (where modal is closed)</p>
  <pre><code>const AddItemModalHeader = (props) =&gt; {
    let targetElement = document.getElementById(&quot;add-item-modal&quot;);
  
    return (
      &lt;div className=&quot;modal-header&quot;&gt;
        add item
        &lt;div className=&quot;close&quot; onClick={(e) =&gt; {
          props.handleModalClose(e);
          enableBodyScroll(targetElement);
        }}&gt;
         close
        &lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>In documentation it is written that <code>targetElement</code> must be the the modal that I want to display. But since the application is rendered inside <code>root</code> div and modal displayed in <code>add-item-modal</code>, shouldn't it be the <code>root</code> instead and apply to it the provided functions such as <code>enableBodyScroll</code>, <code>disableBodyScroll</code>, <code>clearAllBodyScrollLocks</code>. I did try with both <code>root</code> and <code>add-item-modal</code> and in both cases the scrolling does not work on the modal when I test from my iOS device.</p>
  <p>The example provided there does not make this clear to me. Could someone explain what am I doing wrong here?</p>
  <p><strong>UPDATE</strong></p>
  <p>Others that might have this issue on iOS devices please see the following well-explained answer from Github thread
  <a href="https://github.com/ionic-team/ionic-v1/issues/155#issuecomment-411110252" rel="nofollow noreferrer">https://github.com/ionic-team/ionic-v1/issues/155#issuecomment-411110252</a></p>