useLockBodyScroll

锁定 body 滚动的 Hook

代码演示

基本用法

Unlocked

• 0
• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

Live Editor

Copy

function Example() { const listRef = useRef() const [locked, setLocked] = useState(false) useLockBodyScroll(listRef, locked) return ( <div> <span>{ locked ? 'Locked' : 'Unlocked' }</span> <Button style={{ marginLeft: 10 }} onClick={() => setLocked(!locked)} > { locked ? 'Unlock' : 'Lock' } </Button> <ul ref={listRef} style={{ marginTop: 20, border: '1px solid #eee', height: 100, overflow: 'auto', }} > { Array.from({ length: 20 }, (_, index) => <li key={index}>{ index }</li>) } </ul> </div> ) }

function Example() {
  const listRef = useRef()
  const [locked, setLocked] = useState(false)
  useLockBodyScroll(listRef, locked)
  return (
    <div>
      <span>{ locked ? 'Locked' : 'Unlocked' }</span>
      <Button
        style={{ marginLeft: 10 }}
        onClick={() => setLocked(!locked)}
      >
        { locked ? 'Unlock' : 'Lock' }
      </Button>
      <ul 
        ref={listRef}
        style={{ 
          marginTop: 20,
          border: '1px solid #eee',
          height: 100, 
          overflow: 'auto',
        }}
      >
        {
          Array.from({ length: 20 }, (_, index) => <li key={index}>{ index }</li>)
        }
      </ul>
    </div>
  )
}

API

type UseLockBodyScroll = (targetElementRef: React.MutableRefObject<Element> | Element, locked = true, options?: Options) => void

Options

参考: body-scroll-lock