在可视区域内进行元素的滚动

1、组件写法

<div className={styles.brandPromotion_header}>
        <div
          className={styles.brandPromotion_header_brandList}
          ref={menuRef}
          style={{ transform: `translateX(${translateX}px)` }}
        >
          {brandSceneTree.length > 0 &&
            brandSceneTree.map((item: any) => {
              return (
                <span
                  key={item.id}
                  className={`${styles.brandPromotion_header_brand} ${selectedBrand === item.id ? styles.brandPromotion_header_brand_selected : ''}`}
                  onClick={_selectBrand(item)}
                >
                  <GetImg src={item.imgUrl} alt="bigPic" />
                </span>
              );
            })}
        </div>
        {getVisible?.leftVisible && (
          <div className={styles.leftIcon} onClick={() => _arrowClick('left')}>
            <div>{headerLeft}</div>
          </div>
        )}
        {getVisible?.rightVisible && (
          <div
            className={styles.rightIcon}
            onClick={() => _arrowClick('right')}
          >
            <div>{headerRight}</div>
          </div>
        )}
      </div>

2、方法

  useEffect(() => {
    const timer = setTimeout(() => {
      setTotalWidth(menuRef.current.scrollWidth);
      setVisibleWidth(menuRef.current.clientWidth);
    }, 500);
    return () => {
      clearTimeout(timer);
    };
  }, [menuRef.current, currentWindowWidth]);
  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentWindowWidth(window.innerWidth);
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);
    /**
   * 判断图片是否在可视区域
   */
  const getVisible = useMemo(() => {
    if (visibleWidth >= totalWidth) {
      return { leftVisible: false, rightVisible: false };
    }
    if (translateX === 0) {
      return { leftVisible: false, rightVisible: true };
    } else if (visibleWidth - translateX >= totalWidth) {
      return { leftVisible: true, rightVisible: false };
    } else if (visibleWidth - translateX < totalWidth) {
      return { leftVisible: true, rightVisible: true };
    }
  }, [totalWidth, visibleWidth, translateX]);

  /**
   * 判断图片是否在可视区域
   */
  const _arrowClick = (direction: string) => {
    if (direction === 'right') {
      if (visibleWidth - translateX - 240 <= totalWidth) {
        setTranslateX(translateX - 240);
      } else {
        setTranslateX(visibleWidth - totalWidth);
      }
    } else {
      if (visibleWidth - totalWidth + 240 <= 0) {
        setTranslateX(translateX + 240);
      } else {
        setTranslateX(0);
      }
    }
  };