优化自定义滚动组件中的元素可见性检测与键盘事件处理

    useEffect(() => {
        let box = document.getElementById("musterOverviewDocumentChecklist");
        console.log(box.getBoundingClientRect());
        let width = box.offsetWidth;

        setCanScrollLeft(-scrollDistance <= 0);
        setCanScrollRight(
            -scrollDistance >=
                (documentCategories.documents.length + 1) * 210 - width
        );
    }, [documentCategories, scrollDistance]);

const preventKeyPress = (function preventKeys() {
    // 使用Set存储需要阻止的按键，方便扩展
    const preventKeys = new Set(['Tab']);

    // 监听全局的keydown事件
    addEventListener('keydown', event => {
        // 如果按下的键在preventKeys集合中
        if (preventKeys.has(event.key)) {
            // 阻止事件的进一步传播和默认行为
            event.stopImmediatePropagation();
            event.preventDefault();
        }
    });

    // 返回preventKeys集合，允许外部在运行时添加或移除要阻止的键
    // 这种IIFE（立即执行函数表达式）模式使得preventKeys可以在外部被调用，
    // 同时内部的preventKeys Set保持私有状态。
    return preventKeys;
})();

// 如果需要，可以在运行时添加其他要阻止的键
// preventKeyPress.add('ArrowLeft');
// preventKeyPress.add('ArrowRight');

import React, { useRef, useEffect, useState } from 'react';

function Carousel({ items }) {
    const carouselRef = useRef(null);
    const [canScrollRight, setCanScrollRight] = useState(true);
    const [canScrollLeft, setCanScrollLeft] = useState(false);
    const itemRefs = useRef([]); // 用于存储每个走马灯子元素的引用

    // 假设您的走马灯有一个“向右滚动”按钮，当最后一个元素完全可见时应禁用
    // 或者，当最后一个元素进入视口时，表示没有更多内容可滚动。

    useEffect(() => {
        if (!carouselRef.current) return;

        // 观察走马灯容器的滚动，以及最后一个元素的可见性
        const observerOptions = {
            root: carouselRef.current, // 观察者将观察目标元素相对于此元素（走马灯容器）的交集
            rootMargin: '0px',
            threshold: 1.0, // 当目标元素100%可见时触发回调
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                // 判断最后一个元素是否完全进入视口
                if (entry.target.dataset.isLastItem === 'true') {
                    setCanScrollRight(!entry.isIntersecting); // 如果最后一个元素完全可见，则不能再向右滚动
                }
                // 您也可以在这里添加逻辑来判断第一个元素是否完全可见，以控制向左滚动按钮
                if (entry.target.dataset.isFirstItem === 'true') {
                    setCanScrollLeft(!entry.isIntersecting); // 如果第一个元素完全可见，则不能再向左滚动
                }
            });
        }, observerOptions);

        // 观察走马灯中的所有子元素，特别是第一个和最后一个
        itemRefs.current.forEach((itemRef, index) => {
            if (itemRef) {
                if (index === 0) itemRef.dataset.isFirstItem = 'true';
                if (index === items.length - 1) itemRef.dataset.isLastItem = 'true';
                observer.observe(itemRef);
            }
        });

        // 清理函数
        return () => {
            itemRefs.current.forEach(itemRef => {
                if (itemRef) observer.unobserve(itemRef);
            });
            observer.disconnect();
        };
    }, [items]); // 当items变化时重新设置观察者

    const scroll = (direction) => {
        if (carouselRef.current) {
            const scrollAmount = direction === 'left' ? -210 : 210; // 假设每次滚动210px
            carouselRef.current.scrollBy({
                left: scrollAmount,
                behavior: 'smooth'
            });
            // Intersection Observer 会自动检测到滚动后的元素可见性变化并更新状态
        }
    };

    return (
        <div ref={carouselRef} style={{ overflowX: 'scroll', whiteSpace: 'nowrap', display: 'flex' }}>
            {items.map((item, index) => (
                <div
                    key={item.id}
                    ref={el => itemRefs.current[index] = el}
                    style={{ minWidth: '200px', height: '100px', border: '1px solid gray', margin: '5px', display: 'inline-block' }}
                >
                    {item.content}
                </div>
            ))}
            <button onClick={() => scroll('left')} disabled={!canScrollLeft}>Scroll Left</button>
            <button onClick={() => scroll('right')} disabled={!canScrollRight}>Scroll Right</button>
        </div>
    );
}