如何在React/Next.js中点击图片无滚动定位指定元素？

方法1：优化scrollIntoView参数，禁用动画 #

默认的scrollIntoView会带平滑滚动动画，当DOM元素数量较多时，动画过程会触发多次重排重绘导致卡顿。可以通过配置参数实现瞬间定位，跳过动画过程：

import { useRef } from 'react';

const ProfilePage = () => {
  // 给目标图片元素绑定ref
  const targetImageRef = useRef(null);

  const handleThumbnailClick = () => {
    targetImageRef.current?.scrollIntoView({
      behavior: 'instant', // 无动画，瞬间完成定位
      block: 'nearest',    // 仅让元素进入视口即可，最小化滚动距离
      inline: 'nearest'
    });
  };

  return (
    <div>
      {/* 缩略图点击触发定位 */}
      <img src="/thumbnail.jpg" onClick={handleThumbnailClick} alt="缩略图" />
      
      {/* 图片列表中的目标元素 */}
      <div className="image-list">
        {/* ...其他图片... */}
        <img ref={targetImageRef} src="/target-image.jpg" alt="目标图片" />
        {/* ...其他图片... */}
      </div>
    </div>
  );
};

方法2：手动计算偏移量，直接设置容器scrollTop #

如果图片列表放在一个独立的滚动容器内，手动计算目标元素相对于容器的偏移量，直接修改容器的scrollTop，性能比scrollIntoView更可控：

import { useRef } from 'react';

const ProfilePage = () => {
  const imageContainerRef = useRef(null);
  const targetImageRef = useRef(null);

  const handleThumbnailClick = () => {
    if (!imageContainerRef.current || !targetImageRef.current) return;

    // 计算目标元素相对于容器的顶部偏移
    const containerRect = imageContainerRef.current.getBoundingClientRect();
    const imageRect = targetImageRef.current.getBoundingClientRect();
    const offset = imageRect.top - containerRect.top + imageContainerRef.current.scrollTop;

    // 直接设置滚动位置，无动画瞬间定位
    imageContainerRef.current.scrollTop = offset;
  };

  return (
    <div>
      <img src="/thumbnail.jpg" onClick={handleThumbnailClick} alt="缩略图" />
      
      {/* 带滚动的图片容器 */}
      <div ref={imageContainerRef} className="image-container" style={{ height: '600px', overflowY: 'auto' }}>
        {/* ...其他图片... */}
        <img ref={targetImageRef} src="/target-image.jpg" alt="目标图片" />
        {/* ...其他图片... */}
      </div>
    </div>
  );
};

方法3：使用虚拟滚动（从根源解决大量DOM卡顿） #

当图片数量达到100+时，页面中存在大量DOM元素是卡顿的核心原因。使用虚拟滚动只渲染当前视口内的图片，其他图片在滚动到可视区域时才动态渲染，能大幅提升性能：

以react-window库为例：

import { FixedSizeList } from 'react-window';
import { useState, useRef } from 'react';

const ImageList = ({ images, ref }) => {
  // 渲染单张图片项
  const renderImageItem = ({ index, style }) => {
    const image = images[index];
    return (
      <div style={style} className="image-item">
        <img src={image.src} alt={image.alt} loading="lazy" />
      </div>
    );
  };

  return (
    <FixedSizeList
      ref={ref}
      height={600}       // 容器高度
      width="100%"       // 容器宽度
      itemCount={images.length} // 总图片数
      itemSize={200}     // 每张图片的固定高度（可根据实际调整）
    >
      {renderImageItem}
    </FixedSizeList>
  );
};

// 在页面中使用
const ProfilePage = () => {
  const [images] = useState(/* 100+张图片的数组 */);
  const listRef = useRef(null);

  const handleThumbnailClick = (targetIndex) => {
    // 滚动到指定索引的图片
    listRef.current?.scrollToItem(targetIndex);
  };

  return (
    <div>
      {/* 缩略图列表 */}
      <div className="thumbnail-list">
        {images.map((img, idx) => (
          <img 
            key={idx} 
            src={img.thumbnailSrc} 
            onClick={() => handleThumbnailClick(idx)} 
            alt={img.alt} 
          />
        ))}
      </div>
      
      {/* 虚拟滚动的图片列表 */}
      <ImageList ref={listRef} images={images} />
    </div>
  );
};

额外优化：图片懒加载 #

配合原生的loading="lazy"属性，让图片在进入视口时才加载，减少初始渲染的内存占用和网络请求，进一步提升页面流畅度：

<img src="image.jpg" loading="lazy" alt="用户上传图片" />

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