使用LockBody滚动钩

useLockBodyScroll 用于控制网络应用程序中身体元素的滚动行为。 这对打开模式或上覆等需要禁用背景卷轴的情景特别有用.

特征

• 有条件的滚动锁 : 允许您有条件启用或禁用身体滚动.
• 样式保存 : 保留了原车体外溢样式,并在卸载后恢复.
• 服务器- Side 渲染( SSR) 兼容性 : 在安全部门改革环境中使用的安全性,检查 document 对象.
• 同步执行 : 用途 useLayoutEffect 用于同步更新 DOM.

安装

只安装当前钩

npm install @custom-react-hooks/use-lock-body-scroll

或者说

yarn add @custom-react-hooks/use-lock-body-scroll

安装全部钩

npm install @custom-react-hooks/all

或者说

yarn add @custom-react-hooks/all

导入虎克

这个 useLockBodyScroll 钩必须使用下列命名的导入方式导入:

已命名的导入 :

import { useLockBodyScroll } from '@custom-react-hooks/use-lock-body';

这种方法确保了钩子无缝地融入到您的项目中,在您如何使用我们的包时保持一致性和可预测性.

使用量

import React, { useState } from 'react';
import { useLockBodyScroll } from '@custom-react-hooks/all';

const LockBodyScrollComponent= () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  useLockBodyScroll(isModalOpen);

  return (
    <div>
      <p>{isModalOpen ? 'Scroll hidden' : 'When you click on the button scroll will be hidden'}</p>
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      {isModalOpen && (
        <div className="modal">
          <div>
            <p>Modal Content</p>
            <button onClick={() => setIsModalOpen(false)}>Close Modal</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default LockBodyScrollComponent;

在这个例子中,钩子用来锁住模式打开后的身体卷轴.

API 参考

• lock:一个布尔表示是否锁定(true)或解锁(false)身体卷轴.

使用大小写

1. 模块和弹出:这是最常用的用例. 当一个模式或弹出被打开时,往往需要锁定背景内容来阻止用户滚动. 这保持了对模式内容的关注.

2. 满分菜单:在移动响应设计或某些桌面布局中,当全屏菜单被打开时,您可能想要锁定滚动来保持用户对导航选项的关注.

3. 入住流动或导游:如果您的应用程序有分步登机的过程或导游,您可能想要锁定滚动,以确保用户在不分散注意力的情况下遵循流量.

4. 图像或视频收藏:当用户点击一幅图像或视频以更大的格式(如灯盒)查看时,将卷轴锁上可以去除背景分心来增强取景体验.

5. 无限分卷预防: 在某些情况下,您可能想要暂时禁用无限滚动特性. 例如,当一个用户执行需要注意或确认的动作时,可以锁定滚动来保持他们专注于任务.

6. 交互式游戏或Quizzes:如果在网络应用程序中嵌入游戏或试玩,在这些元素被聚焦时,可能想要锁定背景卷轴来增强用户参与,并预防出意外的卷轴脱落.

7. 警报或重要通知:当显示需要立即关注或采取行动的关键警报或通知时,使背景卷轴失效可以确保用户在不分散注意力的情况下处理这些警报.

8. 复杂形式或调查:在一个长而多步骤的形式或调查中,您可能想要在显示验证错误或重要信息时将卷轴锁定,以确保用户看到并承认这些消息.

捐款

你对改进的贡献 useLockBodyScroll 欢迎光临。 请随意向存储处提交问题或调取请求.