时间戳

首页 > 解决方案 > Locking the body scroll, blocks target element scrolling

javascript - Locking the body scroll, blocks target element scrolling

问题描述

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.

https://www.npmjs.com/package/body-scroll-lock

My modal AddItemModal is a portal so inside index.html file I have this.

<body>
  <div id="root"></div>
  <div id="add-item-modal"></div>
</body>

NavigationIcons component (where modal is opened)

const NavigationIcons = (props) => {
  let targetElement = document.getElementById("add-item-modal");

  useEffect(() => {
    ...
    return () => clearAllBodyScrollLocks();
  }, []);

  const renderAddItemModal = () => {
    if (props.addItem) {
      disableBodyScroll(targetElement);
      return <AddItemModal />;
    }
  };

  return (
    <div className="main-4" onClick={() => props.openAddItemModal()}>
      {renderAddItemModal()}
    </div>
  );
}

AddItemModalHeader component (where modal is closed)

const AddItemModalHeader = (props) => {
  let targetElement = document.getElementById("add-item-modal");

  return (
    <div className="modal-header">
      add item
      <div className="close" onClick={(e) => {
        props.handleModalClose(e);
        enableBodyScroll(targetElement);
      }}>
       close
      </div>
    </div>
  )
}

In documentation it is written that targetElement must be the the modal that I want to display. But since the application is rendered inside root div and modal displayed in add-item-modal, shouldn't it be the root instead and apply to it the provided functions such as enableBodyScroll, disableBodyScroll, clearAllBodyScrollLocks. I did try with both root and add-item-modal and in both cases the scrolling does not work on the modal when I test from my iOS device.

The example provided there does not make this clear to me. Could someone explain what am I doing wrong here?

UPDATE

Others that might have this issue on iOS devices please see the following well-explained answer from Github thread https://github.com/ionic-team/ionic-v1/issues/155#issuecomment-411110252

标签： javascriptreactjsscroll

解决方案

一些已知的问题body-scroll-lock是

  • 不适用于 Android 网络视图
  • 在带有鼠标滚轮的 PC 上不起作用
  • 如果您触摸某处而不是 targetElement，则在 iOS 上不起作用
  • 必须通过 targetElement，即使没有必要

进入tua-body-scroll-lock

请知道我与 没有任何联系tua-body-scroll-lock。

tua-body-scroll-lock具有相同的功能body-scroll-lock。喜欢

  • disableBodyScroll别名lock
  • enableBodyScroll别名unlock
  • clearAllBodyScrollLocks别名clearBodyLocks

我用一个例子做了一个小提琴tua-body-scroll-lock

你的代码应该像

import {lock, unlock, clearBodyLocks} from 'tua-body-scroll-lock';

const NavigationIcons = (props) => {
  ...
  useEffect(() => {
    ...
    return () => clearBodyLocks();
  }, []);

  const renderAddItemModal = () => {
    if (props.addItem) {
      lock(targetElement);
      return <AddItemModal />;
    }
  };

  ...
}

const AddItemModalHeader = (props) => {
  return (
    <div className="modal-header">
      add item
      <div className="close" onClick={(e) => {
        props.handleModalClose(e);
        unlock(targetElement);
      }}>
       close
      </div>
    </div>
  )
}

推荐阅读