@nutui/nutui-react/dist/es/hooks/use-lock-scroll.js

京东风格的轻量级移动端 React 组件库，支持一套代码生成 H5 和小程序

import { useEffect } from "react";
import { useTouch } from "./use-touch";
import { getScrollParent } from "../utils/get-scroll-parent";
import { passiveSupported } from "../utils/supports-passive";
var totalLockCount = 0;
var BODY_LOCK_CLASS = 'nut-overflow-hidden';
function getScrollableElement(el) {
    var current = el === null || el === void 0 ? void 0 : el.parentElement;
    while(current){
        if (current.clientHeight < current.scrollHeight) {
            return current;
        }
        current = current.parentElement;
    }
    return null;
}
// 移植自vant：https://github.com/youzan/vant/blob/HEAD/src/composables/use-lock-scroll.ts
export function useLockScroll(rootRef, shouldLock) {
    var touch = useTouch();
    var onTouchMove = function(event) {
        touch.move(event);
        var direction = touch.deltaY.current > 0 ? '10' : '01';
        var el = getScrollParent(event.target, rootRef.current);
        if (!el) return;
        // This has perf cost but we have to compatible with iOS 12
        if (shouldLock === 'strict') {
            var scrollableParent = getScrollableElement(event.target);
            if (scrollableParent === document.body || scrollableParent === document.documentElement) {
                event.preventDefault();
                return;
            }
        }
        var scrollHeight = el.scrollHeight, offsetHeight = el.offsetHeight, scrollTop = el.scrollTop;
        var status = '11';
        if (scrollTop === 0) {
            status = offsetHeight >= scrollHeight ? '00' : '01';
        } else if (scrollTop + offsetHeight >= scrollHeight) {
            status = '10';
        }
        if (status !== '11' && touch.isVertical() && !(parseInt(status, 2) & parseInt(direction, 2))) {
            if (event.cancelable) {
                event.preventDefault();
            }
        }
    };
    var lock = function() {
        document.addEventListener('touchstart', touch.start);
        document.addEventListener('touchmove', onTouchMove, passiveSupported ? {
            passive: false
        } : false);
        if (!totalLockCount) {
            document.body.classList.add(BODY_LOCK_CLASS);
        }
        totalLockCount++;
    };
    var unlock = function() {
        if (totalLockCount) {
            document.removeEventListener('touchstart', touch.start);
            document.removeEventListener('touchmove', onTouchMove);
            totalLockCount--;
            if (!totalLockCount) {
                document.body.classList.remove(BODY_LOCK_CLASS);
            }
        }
    };
    useEffect(function() {
        if (shouldLock) {
            lock();
            return function() {
                unlock();
            };
        }
    }, [
        shouldLock
    ]);
}