如何在React TypeScript中将元素滚动到距顶部24rem的位置？

你当前使用scrollIntoView只能实现固定对齐方式（如顶部、居中），无法精确控制偏移量——这是因为该方法的偏移参数属于非标准特性，兼容性较差。可以通过手动计算滚动位置，结合scrollTo方法实现精确偏移的平滑滚动。

解决步骤 #

1. 将24rem转换为像素值：rem是相对根元素字体大小的单位，先获取根字体大小，计算出24rem对应的像素偏移量。
2. 计算目标滚动位置：获取选中元素相对于滚动容器的顶部位置，减去24rem的像素值，得到最终滚动位置。
3. 执行平滑滚动：使用滚动容器的scrollTo方法，设置平滑滚动行为和目标位置。

完整代码示例 #

import { useEffect, useRef } from 'react';

const DateList = ({ value }: { value: string }) => {
  const scrollRef = useRef<HTMLDivElement>(null);

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

    const selectedDayElement = scrollRef.current.querySelector(".selected-day") as HTMLElement;
    if (!selectedDayElement) return;

    // 计算24rem对应的像素值
    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
    const offsetTopPx = 24 * rootFontSize;

    // 计算选中元素相对于滚动容器的顶部位置
    const elementRelativeTop = selectedDayElement.offsetTop - scrollRef.current.offsetTop;
    // 确保滚动位置不小于0，避免异常滚动
    const targetScrollTop = Math.max(elementRelativeTop - offsetTopPx, 0);

    // 执行平滑滚动
    scrollRef.current.scrollTo({
      top: targetScrollTop,
      behavior: "smooth"
    });
  }, [value]);

  return (
    <div ref={scrollRef} className="overflow-y-auto h-[calc(100vh-4rem)]">
      {/* 你的日期列表项，选中项添加selected-day类 */}
      {/* 示例：<div className={`day-item ${value === date ? 'selected-day' : ''}`}>{date}</div> */}
    </div>
  );
};

export default DateList;

代码说明 #

• rem转px：通过getComputedStyle获取根元素实际字体大小，确保偏移量适配不同页面的字体设置。
• 相对位置计算：selectedDayElement.offsetTop是元素相对于整个文档的顶部位置，减去滚动容器自身的offsetTop，得到元素在容器内部的相对顶部位置。
• 边界处理：用Math.max限制滚动位置不小于0，避免容器向上滚动的异常情况。
• 平滑滚动：scrollTo的behavior: "smooth"参数实现和scrollIntoView一致的平滑效果，且兼容性更强。

内容的提问来源于stack exchange，提问作者VitorLS