当在react js中打开推动栏时，停止背景滚动。

在ReactJS中，要实现在打开推动栏时停止背景滚动，可以通过以下步骤完成：

1. 首先，你需要在React组件中设置一个状态来跟踪推动栏的打开与关闭。可以使用useState钩子或者class组件的state属性进行状态管理。
2. 接下来，你可以使用CSS样式来控制背景滚动。通过给body或者根元素添加一个样式类来禁用滚动，例如：

body.modal-open {
  overflow: hidden;
}

1. 在React组件中，你可以根据推动栏的状态来动态地添加或移除这个样式类。当推动栏打开时，为body元素添加modal-open类，使背景滚动被禁用；当推动栏关闭时，从body元素中移除这个类，恢复背景滚动。可以通过以下代码实现：

import React, { useState } from 'react';

function App() {
  const [isSidebarOpen, setSidebarOpen] = useState(false);

  const handleSidebarToggle = () => {
    setSidebarOpen(!isSidebarOpen);
  };

  // 根据推动栏的状态添加或移除样式类
  if (isSidebarOpen) {
    document.body.classList.add('modal-open');
  } else {
    document.body.classList.remove('modal-open');
  }

  return (
    <div>
      {/* 推动栏组件 */}
      <Sidebar isOpen={isSidebarOpen} onToggle={handleSidebarToggle} />

      {/* 其他页面内容 */}
      <div>Content</div>
    </div>
  );
}

在上述代码中，当isSidebarOpen状态发生改变时，通过添加或移除modal-open类来控制背景滚动。

1. 注意，在React中直接操作DOM并非推荐的做法，但在这种情况下，我们没有其他方式来控制body元素的样式。同时，如果你使用了React Router等路由库，你可能需要在路由切换时也考虑添加或移除样式类的逻辑。

以上是在ReactJS中实现打开推动栏时停止背景滚动的方法。这种技术可以应用于各种需要阻止背景滚动的场景，例如模态框、推动栏、弹出菜单等。

此外，如果你想了解更多关于ReactJS的知识，你可以参考腾讯云的React相关产品和文档：

• 腾讯云云服务器（CVM）：提供可扩展、高可靠、安全的云服务器，适用于部署React应用程序等。
• 腾讯云云开发（CloudBase）：提供完整的云端一体化后端服务，可用于构建和托管React应用程序。
• 腾讯云云函数（SCF）：无服务器计算服务，可用于构建React应用程序的后端逻辑。
• 腾讯云对象存储（COS）：提供安全、持久、可扩展的对象存储服务，适用于存储React应用程序中的静态资源。

希望以上回答能满足你的需求。如有任何疑问，请随时提问。