云策 WordPress 开发者社区

块编辑器开发文档

ScrollLock

查看官方原文 ↗
💡 云策文档标注

概述

ScrollLock 是一个无内容的 React 组件，用于声明式地防止模态 UI 的滚动溢出到页面主体。它通过向 document.documentElement 和 document.scrollingElement 元素添加 lockscroll 类来阻止 body 滚动。

关键要点

  • ScrollLock 是一个 React 组件，专门用于模态 UI 的滚动控制。
  • 组件应用 lockscroll 类到文档元素，以阻止页面主体滚动。
  • 当组件存在时，滚动锁生效；移除时，滚动恢复。

代码示例

import { useState } from 'react';
import { ScrollLock, Button } from '@wordpress/components';

const MyScrollLock = () => {
    const [ isScrollLocked, setIsScrollLocked ] = useState( false );

    const toggleLock = () => {
        setIsScrollLocked( ( locked ) => ! locked ) );
    };

    return (
        <div>
            <Button variant="secondary" onClick={ toggleLock }>
                Toggle scroll lock
            </Button>
            { isScrollLocked && <ScrollLock /> }
            <p>
                Scroll locked:
                <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
            </p>
        </div>
    );
};
📄 原文内容

ScrollLock is a content-free React component for declaratively preventing scroll bleed from modal UI to the page body. This component applies a lockscroll class to the document.documentElement and document.scrollingElement elements to stop the body from scrolling. When it is present, the lock is applied.

Usage

Declare scroll locking as part of modal UI.

import { useState } from 'react';
import { ScrollLock, Button } from '@wordpress/components';

const MyScrollLock = () => {
    const [ isScrollLocked, setIsScrollLocked ] = useState( false );

    const toggleLock = () => {
        setIsScrollLocked( ( locked ) => ! locked ) );
    };

    return (
        <div>
            <Button variant="secondary" onClick={ toggleLock }>
                Toggle scroll lock
            </Button>
            { isScrollLocked && <ScrollLock /> }
            <p>
                Scroll locked:
                <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
            </p>
        </div>
    );
};