const scrollToCenter = (element) => {
    const tabsContainer = document.getElementById('scrollView');//scrollView滚动的tab父元素
    const tabsContainerWidth = tabsContainer.offsetWidth;
    const elementLeft = element.offsetLeft;
    const elementWidth = element.offsetWidth;

    // 计算滚动的目标位置:元素左侧位置加元素宽度的一半,再减去容器宽度的一半
    const scrollX = elementLeft + elementWidth / 2 - tabsContainerWidth / 2;
    tabsContainer.scrollTo({
      left: scrollX,
      behavior: 'smooth',
    });
  };

  useEffect(() => {
    scrollToCenter(document.getElementById('activeTab'));
  }, [document.getElementById('activeTab')]);
posted on 2024-05-14 11:17  蒸汽小工人  阅读(13)  评论(0编辑  收藏  举报