ReactJS中如何监听页面尺寸变化自动显示‘More Content’箭头？

可以通过结合窗口resize事件和DOM变化监听来实现自动检测，不用每次加载内容后手动触发检查。下面是具体的React组件实现方案：

核心逻辑 #

1. 编写检查函数，对比页面总高度与视口高度，判断是否需要显示箭头
2. 组件挂载时执行初始检查
3. 监听窗口尺寸变化，实时更新状态
4. 用MutationObserver监听DOM内容变化（比如加载更多内容导致页面高度改变），自动触发检查

代码示例 #

import { useState, useEffect } from 'react';

function ScrollArrow() {
  const [showScrollArrow, setShowScrollArrow] = useState(false);

  // 检查页面是否超出视口
  const checkScrollNeeded = () => {
    const pageTotalHeight = document.documentElement.scrollHeight;
    const viewportHeight = window.innerHeight;
    // 加小阈值避免刚好超出一点就显示
    setShowScrollArrow(pageTotalHeight > viewportHeight + 10);
  };

  useEffect(() => {
    // 初始检查
    checkScrollNeeded();

    // 监听窗口 resize
    window.addEventListener('resize', checkScrollNeeded);

    // 监听DOM内容变化（比如加载更多组件、列表项）
    const domObserver = new MutationObserver(checkScrollNeeded);
    domObserver.observe(document.body, {
      childList: true, // 监听子元素增删
      subtree: true,   // 监听所有后代元素
      attributes: false,
      characterData: false
    });

    // 组件卸载时清理监听
    return () => {
      window.removeEventListener('resize', checkScrollNeeded);
      domObserver.disconnect();
    };
  }, []);

  return (
    showScrollArrow && (
      <div style={{
        position: 'fixed',
        bottom: '20px',
        right: '20px',
        padding: '8px 12px',
        background: '#333',
        color: '#fff',
        borderRadius: '4px',
        cursor: 'pointer'
      }}>
        More Content ↓
      </div>
    )
  );
}

export default ScrollArrow;

自定义调整 #

• 如果是特定容器（比如某个列表组件）而非整个页面，只需把document.body换成容器的ref，把document.documentElement.scrollHeight换成容器的scrollHeight，window.innerHeight换成容器的clientHeight即可。
• 可以调整检查函数里的阈值，避免页面高度刚好超出视口一点点就显示箭头。

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