Javascript 锁定主体滚动，阻止目标元素滚动_Javascript_Reactjs_Scroll

Javascript 锁定主体滚动，阻止目标元素滚动

javascript reactjs scroll

Javascript 锁定主体滚动，阻止目标元素滚动,javascript,reactjs,scroll,Javascript,Reactjs,Scroll,我使用下面的库来锁定页面主体的滚动，并且只允许在打开模式时滚动我的modalAddItemModal是一个门户，所以在index.html文件中我有这个 <body> <div id="root"></div> <div id="add-item-modal"></div> </body> 导航图标组件（打开模式的位置） const导航图标=（道具）=>{ 让targ

我使用下面的库来锁定页面主体的滚动，并且只允许在打开模式时滚动

我的modal

AddItemModal

是一个门户，所以在

index.html

文件中我有这个

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

导航图标组件（打开模式的位置）

const导航图标=（道具）=>{
让targetElement=document.getElementById（“添加项模式”）；
useffect（（）=>{
...
return（）=>clearAllBodyScrollLocks（）；
}, []);
常量renderaditemmodal=（）=>{
如果（道具附加项）{
禁用BodyScroll（targetElement）；
return
一些已知的问题是

不适用于Android webview
在带鼠标滚轮的电脑上不工作
如果您触摸某处而不是targetElement，则无法在iOS上工作
必须通过targetElement，即使它不是必需的

进入

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

tua车身滚动锁
具有与车身滚动锁
相同的功能。如

disableBodyScroll
enableBodyScroll
clearAllBodyScrollLocks
clearBodyLocks的别名

我用tua body滚动锁摆弄了一把小提琴

您的代码应该是
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>
  )
}

从“tua body scroll lock”导入{lock，unlock，clearBodyLocks}；
常量导航图标=（道具）=>{
...
useffect（（）=>{
...
return（）=>clearBodyLocks（）；
}, []);
常量renderaditemmodal=（）=>{
如果（道具附加项）{
锁（targetElement）；
返回；
}
};
...
}
常量AddItemModalHeader=（道具）=>{
返回(
添加项
{
道具。手足挂毯（e）；
解锁（targetElement）；
}}>
关闭
)
}
如果您查看他们的源代码，在内部执行的唯一操作是，如果设备是IOS，则附加ontouchstart
和ontouchmove
事件，如果targetElement接近可滚动边界，则只需有条件地阻止事件（通过调用e.preventDefault（）
）
因此，如果我理解正确，targetElement
必须是一个可滚动的元素，否则它永远不会绕过这些边界检查，并且会阻止滚动
在您的情况下，我认为additem model
不是一个可滚动的元素，因此它不起作用。请尝试将模式中的任何可滚动元素设置为targetElement
我正在查看您的示例，不知道您从何处获取clearBodyLocks
变量。我认为我的问题是我没有针对正确的节点e元素，我想更好地理解你做了什么来理解如何使它工作。clearBodyLocks
函数与你的clearAllBodyScrollLocks
有着相同的用途，我将它与lock
和unlock
函数一起导入到代码的顶部。由于我的错误，我的意思是bodyScrollLock
从示例ooh.我在HTML中导入了带有脚本标记的tua body scroll lock
。因此bodyScrollLock
就像是保存锁的对象，unlock
和clearBodyLocks
功能我编辑了JSFIDLE
，以注销bodyScrollLockche从我编辑的答案中勾选新链接
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>
  )
}

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>
  )
}