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

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]);

稿定AI

拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能

25

查看详情

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>     ); }