如何实现用户滚动页面400px后，让内部聊天div滚动到底部？

原代码的核心问题有两个：

1. React的useEffect在组件挂载时会默认执行一次，导致页面加载就触发了滚动操作；
2. 依赖项使用window?.scrollY === 400这种动态表达式，既不符合Hooks的依赖规则，也无法精准监听滚动状态的变化。

下面提供两种针对性的修复方案，可根据你的需求选择：

方案一：仅在首次滚动到400px时触发 #

适用于只需要在用户第一次滚动到目标位置时执行一次滚动到底部的场景：

import { useRef, useEffect, useState } from 'react';

const ScrollBottom = () => {
  const elementRef = useRef(null);
  // 记录上一次的滚动位置，用于判断是否从低于400px的位置滚动上来
  const [prevScrollY, setPrevScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const currentScrollY = window.scrollY;
      // 仅当滚动到400px及以上，且之前位置低于400px时触发
      if (currentScrollY >= 400 && prevScrollY < 400) {
        elementRef.current?.scrollIntoView({ behavior: "smooth" });
      }
      setPrevScrollY(currentScrollY);
    };

    window.addEventListener('scroll', handleScroll);
    // 组件卸载时清理监听，防止内存泄漏
    return () => window.removeEventListener('scroll', handleScroll);
  }, [prevScrollY]);

  return <div ref={elementRef} />;
};

export default ScrollBottom;

方案二：每次滚动到400px区域时触发（带防抖） #

适用于希望用户每次滚动到400px位置时都执行滚动到底部的场景，加入防抖避免滚动过程中多次触发：

import { useRef, useEffect } from 'react';

const ScrollBottom = () => {
  const elementRef = useRef(null);
  const debounceTimer = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      // 防抖：滚动停止100ms后再执行判断
      if (debounceTimer.current) clearTimeout(debounceTimer.current);
      
      debounceTimer.current = setTimeout(() => {
        if (window.scrollY >= 400) {
          elementRef.current?.scrollIntoView({ behavior: "smooth" });
        }
      }, 100);
    };

    window.addEventListener('scroll', handleScroll);
    return () => {
      window.removeEventListener('scroll', handleScroll);
      if (debounceTimer.current) clearTimeout(debounceTimer.current);
    };
  }, []);

  return <div ref={elementRef} />;
};

export default ScrollBottom;

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