Javascript 防止在React渲染组件上使用CSS滚动_Javascript_Html_Css_Reactjs

Javascript 防止在React渲染组件上使用CSS滚动

javascript html css reactjs

Javascript 防止在React渲染组件上使用CSS滚动,javascript,html,css,reactjs,Javascript,Html,Css,Reactjs,因此，我在html中通过React呈现组件，如下所示： <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> ${appHtml} 在我的应用程序中，我有一个汉堡按钮，onClick全屏显示但是，正文是可滚动的。我通常会在body标记中

因此，我在

html

中通过React呈现组件，如下所示：

 <html>
  <body>
    <div id=app>${appHtml}</div>
    <script src="/bundle.js"></script>
  </body>
</html>


${appHtml}

在我的应用程序中，我有一个汉堡按钮，

onClick

全屏显示

但是，正文是可滚动的。我通常会在

body

标记中添加一个类，并使其

溢出：隐藏以防止出现这种情况。但是，我的react组件是在body
标记中呈现的，因此我无法控制基于react组件中的单击来切换类
有没有人对我如何实现自己的目标有什么想法/建议
谢谢
 “我无法控制基于react组件中的单击来切换类。”
不一定是真的
您以一种“反应式”的方式思考，并对修改DOM保持警惕，这是很好的。您希望避免执行DOM操作的主要原因是，它会导致React尝试呈现的内容与您可能尝试进行的未知更改之间发生冲突。但在本例中，您并不是在操纵React正在渲染的DOM，而是在操纵它的父对象。在这种情况下，您完全可以这样做：
document.body.style.overflow = "hidden"

<html>
  <body>
    <div id="app">
      <div id="scroll-container">
        <!-- the rest of your app -->
      </div>
    </div>
  </body>
</html>

或
或者任何有用的东西。您是完全安全的，因为React只呈现#app
中的DOM，而不关心其父级中发生了什么。事实上，许多应用程序和网站只在页面的一小部分使用React来呈现单个组件或小部件，而不是整个应用程序
除此之外，还有一种更好、更“反应积极”的方式来做你想做的事情。只需重新构造应用程序，使滚动容器位于React应用程序中，而不是主体
。结构可能如下所示：
document.body.style.overflow = "hidden"

<html>
  <body>
    <div id="app">
      <div id="scroll-container">
        <!-- the rest of your app -->
      </div>
    </div>
  </body>
</html>



将body
溢出隐藏，并将body
和#app
填充整个屏幕，您可以控制#滚动容器
是否允许在React内滚动。
上述操作不适用于iOS mobile
使用CSS和JS的组合，使其适用于所有设备，同时保持目标元素（如模态）的可滚动性
例如，对于iOS，需要检测何时到达目标元素的底部或顶部，然后完全停止滚动
以下是如何将body scroll lock library与reactjs一起使用
import React, {useState} from 'react';
import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';

// Components
import Hamburger from './HeaderComponents/Hamburger.js';
import MegaDropdown from './HeaderComponents/MegaDropdown.js';

const Header = props => {
  // variables
  const [isSideNavShown, setIsSideNavShown] = useState(false);
  const [isDropdownShowing, setIsDropdownShowing] = useState(false);

  isDropdownShowing ? disableBodyScroll(document) : enableBodyScroll(document)

  return (
    <header className="header">
      <Hamburger isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
      <MegaDropdown isDropdownShowing={isDropdownShowing} setIsDropdownShowing={setIsDropdownShowing} />
    </header>
  )
}

export default Header;

import React，{useState}来自“React”；
从“body scroll lock”导入{disableBodyScroll，enableBodyScroll}；
//组成部分
从“/HeaderComponents/Hamburger.js”导入汉堡；
从“./HeaderComponents/MegaDropdown.js”导入MegaDropdown；
const Header=props=>{
//变数
const[isSideNavShown，setIsSideNavShown]=使用状态（false）；
const[isDropdownShowing，setIsDropdownShowing]=使用状态（false）；
isDropdownShowing？禁用BodyScroll（文档）：启用BodyScroll（文档）
返回(
)
}
导出默认标题；

尤其是行是向下显示的吗？禁用BodyScroll（文档）：启用BodyScroll（文档）

这样，当我的下拉列表中的内容填充到需要添加滚动条的位置时，窗口（主体）滚动条将在下拉列表显示时被禁用（覆盖我的整个屏幕）。因此，即使窗口（主体）滚动被禁用，我仍然可以滚动我的下拉列表。这是我的两分钱：您可以将包含内容的div的高度设置为100%（高度：100%）
或者在这个例子中，body{height:100%}
我建议使用cssposition:“sticky”
，但我想这不是这里要讨论的问题。但这对我很管用。我想其他解决方案更好。
链接可能重复：-谢谢！事实上，我认为react会抱怨，如果你试图改变它的组件之外的任何东西。我从来不知道你还能这样做。这如何回答OP的问题？当父元素的子元素一直向下滚动到底部或顶部时，body scroll lock
是否允许你阻止父元素滚动？@RaulSauco我不得不自己玩一下，看看我在这个问题上的答案。@tonix是的，见我的答案。以答案形式的评论。