useScrollLock

用户处理页面是否能滚动

Import: import { useScrollLock } from '@kubed/hooks;'

Source: View source code

Docs: Edit this page

npm: @kubed/hooks

用法

useScrollLock 请点击按钮查看效果

import React from 'react';
import { useScrollLock } from '@kubed/hooks';
import { Button, Group } from '@kubed/components'

export default function App() {
  const [scrollLocked, setScrollLocked] = useScrollLock(false);

    return (
      <div>
        <p>{ 'scrollLocked: '+scrollLocked }</p>
        <Group spacing="xl">
          <Button onClick={() => setScrollLocked(true)}>Lock</Button>
          <Button onClick={() => setScrollLocked(false)}>unLock</Button>
        </Group>
      </div>
    );
}

1
import React from 'react';
2
import { useScrollLock } from '@kubed/hooks';
3
import { Button, Group } from '@kubed/components'
4

5
export default function App() {
6
  const [scrollLocked, setScrollLocked] = useScrollLock(false);
7

8
    return (
9
      <div>
10
        <p>{ 'scrollLocked: '+scrollLocked }</p>
11
        <Group spacing="xl">
12
          <Button onClick={() => setScrollLocked(true)}>Lock</Button>
13
          <Button onClick={() => setScrollLocked(false)}>unLock</Button>
14
        </Group>
15
      </div>
16
    );
17
}
18

19

API

useScrollLock 钩子接受一个参数：

lock – 是否锁定

1
function useScrollLock(
2
    lock?: boolean
3
  ): readonly [boolean, React.Dispatch<React.SetStateAction<boolean>>]

Params

参数	默认值	类型	描述
lock	`false`	`boolean`	页面是否锁定滚动

Result

参数	默认值	类型	描述
scrollLocked	-	`boolean`	是否锁定状态
setScrollLocked	-	`React.Dispatch<React.SetStateAction<boolean>>`	设置当前状态