如何滚动到元素末尾？

Question

我试图在加载元素时滚动到该元素的底部。在网上搜索后，我找到了这个解决方案，但它不起作用。请指出我代码中的错误。

"use client";

import { useEffect, useRef } from "react";

export default function TestPage() {
  const scrollPage = useRef();
  useEffect(() => {
    scrollPage.current?.scrollIntoView({ behavior: "smooth", block: "end" });
  }, [scrollPage]);
  return (
    <div className="h-[80vh] overflow-scroll" ref={scrollPage}>
      <div className="h-[300vh]"></div>
      <div>bottom</div>
    </div>
  );
}

Answer 1

scrollIntoView 方法应该在最后一个 div 元素上调用，而不是容器

使用上面的示例与此类似

"use client";

import { useEffect, useRef } from "react";

export default function TestPage() {
  const scrollPage = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const lastElement = scrollPage.current?.lastElementChild;
    if (lastElement instanceof HTMLElement) {
      lastElement.scrollIntoView({ behavior: "smooth", block: "end" });
    }
  }, []);

  return (
    <div className="h-[80vh] overflow-scroll" ref={scrollPage}>
      <div className="h-[300vh]"></div>
      <div>bottom</div>
    </div>
  );
}

希望这有帮助

Answer 2

代码中的问题

• scrollIntoView的错误使用：scrollIntoView方法将元素滚动到浏览器窗口的可见区域，但是 因为您想滚动到可滚动容器的底部，所以您 应该使用scrollTop代替。

• useEffect 中的依赖数组：useEffect 的依赖数组不应包含scrollPage。相反，它应该是一个空数组 如果您希望该效果在组件安装时仅运行一次。

• CSS 类： 确保您的 CSS 类已正确应用并 外部 div 具有定义的高度和溢出属性 允许滚动。

  import { useEffect, useRef } from "react";
  
  export default function TestPage() {
    const scrollPage = useRef(null);
  
    useEffect(() => {
      if (scrollPage.current) {
        // Scroll to the bottom of the element
        scrollPage.current.scrollTop = scrollPage.current.scrollHeight;
      }
    }, []); // Empty dependency array
  
    return (
      <div className="h-[80vh] overflow-scroll" ref={scrollPage}>
        <div className="h-[300vh]"></div>
        <div>bottom</div>
      </div>
    );
  }```
  
  

变更说明

滚动到底部：我们不使用scrollIntoView，而是直接将scrollTop设置为scrollHeight，这可以有效地将元素滚动到底部。

依赖数组：依赖数组现在为空（[]），确保组件安装时效果仅运行一次，这适合此用例。

Answer 3

从依赖项数组中删除

scrollPage

，因为您想在页面加载时滚动

useEffect(() => {
  scrollPage.current?.scrollIntoView({ behavior: "smooth", block: "end" });
}, []);