实现页面内容变化后自动滚动

最新推荐文章于 2024-10-18 09:32:49 发布

_必应

最新推荐文章于 2024-10-18 09:32:49 发布

阅读量247

点赞数 2

分类专栏： react javascript/es6/es7 文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/jbguo/article/details/135862209

版权

javascript/es6/es7 同时被 2 个专栏收录

51 篇文章

订阅专栏

react

11 篇文章

订阅专栏

本文介绍了如何在JavaScript中定义并监听滚动元素的内容变化，以便在内容更新后自动滚动到页面底部。主要涉及了使用`generatContent`生成动态内容，以及利用`useEffect`hook监控内容变化并调用`scrollToBottom`函数实现滚动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现步骤

定义滚动的元素及生成内容

const generatContent = '......';
<div className="contentScroll">{generatContent}</div>

监听generatContent内容变化后滚动

  // 生成后自动滚动到底部
  const scrollToBottom = (div: HTMLElement | null) => {
    if (div) {
      div.scrollTop = div?.scrollHeight;
    }
  };

  useEffect(() => {
    const div = document?.getElementsByClassName(
      'contentScroll',
    )[0] as HTMLElement;
    scrollToBottom(div);
  }, [generatContent]);