反应我希望在滚动到底部时显示 console.log()

Question

我想在列表滚动到底部时显示 console.log()。
以下代码在滚动到列表底部时不显示 console.log()。
此外， const { scrollTop, scrollHeight, clientHeight } 将显示错误。
错误信息
类型“未定义”的属性“scrollTop”不存在。 ts(2339)
类型“未定义”的属性“滚动高度”不存在。 ts(2339)
类型“未定义”的属性“clientHeight”不存在。 ts(2339)

import React, { FunctionComponent, useState, useEffect, useRef } from 'react';
const Test: FunctionComponent = () => {
  const listInnerRef = useRef();

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
      if (scrollTop + clientHeight === scrollHeight) {
        // TO SOMETHING HERE
        console.log('Reached bottom');
      }
    }
  };

  return (
      <div className="list">
        <div className="list-inner" onScroll={onScroll} ref={listInnerRef}>
          <ul>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
            <li className="height-100">aaaaaaaa</li>
          </ul>
        </div>
      </div>
  );
};

export default Test;

Answer 1

1. 您可以从总可滚动高度中减去滚动高度。
2. 如果这等于可见区域，则您位于底部element.scrollHeight - element.scrollTop === element.clientHeight
3. 在 react 中，只需为可滚动元素添加一个 onScroll 侦听器，并在回调中使用event.target。

函数句柄滚动（事件）{ 变种节点=事件.目标； 常量底部 = node.scrollHeight - node.scrollTop === node.clientHeight; 如果（底部）{ console.log('BOTTOM REACHED:', 底部); } }