TypeScript报错：HTMLCollectionOf<Element>不存在scrollIntoView属性

问题原因 #

document.getElementsByClassName("vendorCard")返回的是元素集合（HTMLCollectionOf），而scrollIntoView是单个DOM元素的方法，集合本身没有这个方法，因此触发TypeScript类型错误。

解决方案 #

方案1：获取集合中的单个元素并做存在性检查 #

如果目标是滚动到第一个匹配的.vendorCard元素，修改scrollToTop函数：

const scrollToTop = () => {
  const elements = document.getElementsByClassName("vendorCard");
  // 先确认存在匹配元素，再调用方法
  if (elements.length > 0) {
    (elements[0] as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};

• 通过elements.length判断是否有匹配元素，避免空集合报错
• 用as HTMLElement做类型断言，让TypeScript识别元素具备scrollIntoView方法
• 可选配置项：behavior: 'smooth'实现平滑滚动，block: 'start'确保滚动到元素顶部

方案2：用querySelector直接获取单个元素 #

如果只需要匹配第一个.vendorCard，document.querySelector更简洁，它直接返回单个Element（或null）：

const scrollToTop = () => {
  const element = document.querySelector(".vendorCard") as HTMLElement | null;
  if (element) {
    element.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
};

方案3：React推荐的useRef方式（符合React范式） #

避免直接操作DOM，用React的useRef钩子获取目标元素：

import { useRef } from 'react';

const YourComponent = () => {
  const vendorCardRef = useRef<HTMLDivElement>(null);

  const scrollToTop = () => {
    if (vendorCardRef.current) {
      vendorCardRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };

  return (
    <>
      {/* 给目标元素绑定ref */}
      <div className="vendorCard" ref={vendorCardRef}>
        {/* 元素内容 */}
      </div>

      <button
        onClick={scrollToTop}
        className="hidden"
        id="resetScroll"
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '10px',
          border: 'none !important'
        }}
        type="button"
      >
        <ArrowUpwardIcon />
        <p style={{ fontSize: '0.7em', fontWeight: '200' }}>BACK</p>
      </button>
    </>
  );
};

这种方式无需直接查询DOM，更符合React组件化思想，同时规避了TypeScript类型问题。

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