React中scrollIntoView点击后页面上移且Chrome/Opera仅生效一次问题求助

一、修复Chrome/Opera重复点击无响应问题 #

Chrome等浏览器中scrollIntoView首次触发后，若元素已处于视口内，再次点击不会触发滚动。可通过微调滚动位置或结合scrollTo实现强制滚动，同时确保每个分类元素有唯一id：

1. 给右侧分类区块添加唯一标识id：

{Data.map((item) => (
  <div key={item.id} id={`category-${item.id}`} className="category-section">
    <h2>{item.title}</h2>
    {/* 分类内容 */}
  </div>
))}

2. 修改滚动函数，强制触发滚动逻辑：

const scrollToCategory = (id) => {
  const element = document.getElementById(`category-${id}`);
  if (element) {
    // 先微调滚动位置，打破浏览器滚动缓存
    window.scrollBy(0, -1);
    element.scrollIntoView({
      behavior: 'smooth',
      block: 'start',
      inline: 'nearest'
    });
  }
};

二、解决Firefox/Edge/Safari页面整体上移问题 #

页面整体偏移多因scrollIntoView参数默认值或浏览器滚动行为差异，明确配置参数并避免干扰根滚动容器：

1. 明确scrollIntoView的对齐规则：

element.scrollIntoView({
  behavior: 'smooth',
  block: 'start', // 强制元素顶部与视口顶部对齐
  inline: 'nearest'
});

2. 若仍有偏移，改用window.scrollTo手动计算滚动位置：

const scrollToCategory = (id) => {
  const element = document.getElementById(`category-${id}`);
  if (element) {
    const elementTop = element.getBoundingClientRect().top + window.pageYOffset;
    window.scrollTo({
      top: elementTop,
      behavior: 'smooth'
    });
  }
};

三、全屏模式异常修复 #

全屏下Chrome的滚动异常源于视口尺寸变化后的滚动缓存，可通过检查元素视口状态强制触发重排：

// 判断元素是否在视口内
const isElementInViewport = (el) => {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
};

const scrollToCategory = (id) => {
  const element = document.getElementById(`category-${id}`);
  if (element) {
    if (isElementInViewport(element)) {
      // 元素已在视口内，先移出再滚回
      window.scrollBy(0, 10);
      setTimeout(() => {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 50);
    } else {
      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
};

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