原生JS 判断整个文档滚动至底部

// 判断标准：窗口高度 + 滚动条位置 >= 页面高度

// 原生JS 判断整个文档滚动至底部
window.onscroll = ()=>{
  // 窗口高度
  var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // 页面高度
    var documentHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    // 滚动条位置
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if ((windowHeight + scrollTop + 2) >= documentHeight) {
        console.log('页面滚动到达底部');
    }
}
 
// 原生JS 判断元素内部滚动至底部
document.getElementsByClassName('rank_body')[0].getElementsByTagName('ul')[0].onscroll = (e)=>{
  if(e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight){
    console.log('元素内部页面滚动到达底部');
  }
}
// or
document.getElementsByClassName('rank_body')[0].getElementsByTagName('ul')[0].addEventListener("scroll", (e)=>{
  if(e.target.clientHeight + e.target.scrollTop + 2 >= e.target.scrollHeight){
    console.log('元素内部页面滚动到达底部');
  }

 useEffect(() => {
   
    const handleScroll = () => {
      // 窗口高度
      const windowHeight = document.documentElement?.clientHeight || document.body.clientHeight
      // 页面高度
      const documentHeight = document.documentElement?.scrollHeight || document.body.scrollHeight
      // 滚动条位置
      const scrollTop = document.documentElement?.scrollTop || document.body.scrollTop
      if (windowHeight + scrollTop + 2 >= documentHeight) {
        console.log('页面滚动到达底部')
        setIsEnd(true)
      }
    }
    // window.onscroll=()=>{} // 这种方式在qiankun主应用里监听不到滚动事件!!!!!!!!!
    window.addEventListener('scroll', handleScroll)
    return () => {
      // 清除滚动事件监听
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

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

function ScrollToBottomLoad() {
  const containerRef = useRef(null);

  useEffect(() => {
    function handleScroll() {
      const { scrollTop, clientHeight, scrollHeight } = containerRef.current;

      if (scrollTop + clientHeight >= scrollHeight) {
        // 到达底部，执行加载操作
        // 这里可以调用加载数据的函数或触发相应的操作
        console.log('到达底部，执行加载操作');
      }
    }

    // 监听滚动事件
    containerRef.current.addEventListener('scroll', handleScroll);

    return () => {
      // 清除滚动事件监听
      containerRef.current.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div ref={containerRef} style={{ height: '400px', overflow: 'auto' }}>
      {/* 这里是滚动内容 */}
    </div>
  );
}

export default ScrollToBottomLoad;