当前位置：首页 > React

react如何滚动scroll

2026-03-30 19:28:13React

滚动到指定位置

使用window.scrollTo方法可以实现滚动到指定坐标位置。该方法接受两个参数，分别是水平坐标和垂直坐标。

window.scrollTo(0, 500); // 滚动到垂直位置500px

平滑滚动效果

现代浏览器支持scrollTo方法的选项参数，可以添加平滑滚动效果。

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

使用ref滚动元素

对于非window元素的滚动，需要先获取DOM元素的引用。React中可以使用useRef钩子。

import { useRef } from 'react';

function Component() {
  const divRef = useRef(null);

  const scrollToDiv = () => {
    divRef.current.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <button onClick={scrollToDiv}>滚动到元素</button>
      <div ref={divRef}>目标元素</div>
    </>
  );
}

滚动到顶部

创建一个返回顶部的按钮是常见需求，可以通过以下方式实现。

const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
};

监听滚动事件

需要监听页面滚动时，可以在useEffect中添加事件监听器。

import { useEffect } from 'react';

function Component() {
  useEffect(() => {
    const handleScroll = () => {
      console.log(window.scrollY);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
}

滚动加载更多

实现无限滚动加载更多内容时，需要计算滚动位置。

react如何滚动scroll

useEffect(() => {
  const handleScroll = () => {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 500) {
      // 加载更多数据
    }
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);