如何在本机反应中检测滚动视图的单向范围 - JavaScript

在使用 JavaScript 构建反应式 web 应用程序时，我们经常需要检测滚动视图的滚动范围。这对于实现一些动态效果或者加载更多内容等场景非常有用。下面是一种在本机反应中实现此功能的方法。

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

function ScrollDetector() {
  const [scrollDirection, setScrollDirection] = useState(null);
  const [scrollPosition, setScrollPosition] = useState(null);
  const [scrollPercentage, setScrollPercentage] = useState(null);

  const scrollContainerRef = useRef(null);

  useEffect(() => {
    const scrollContainer = scrollContainerRef.current;

    const handleScroll = () => {
      const { scrollTop, scrollHeight, clientHeight } = scrollContainer;

      // 计算滚动位置
      const currentPosition = scrollTop;
      setScrollPosition(currentPosition);

      // 计算滚动百分比
      const percentage = (currentPosition / (scrollHeight - clientHeight)) * 100;
      setScrollPercentage(percentage.toFixed(2));

      // 检测滚动方向
      if (scrollTop > currentPosition) {
        setScrollDirection('down');
      } else if (scrollTop < currentPosition) {
        setScrollDirection('up');
      }
    };

    scrollContainer.addEventListener('scroll', handleScroll);

    return () => {
      scrollContainer.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div
      ref={scrollContainerRef}
      style={{ height: '500px', overflow: 'auto' }}
    >
      <p>Scroll Direction: {scrollDirection}</p>
      <p>Scroll Position: {scrollPosition}</p>
      <p>Scroll Percentage: {scrollPercentage}%</p>
    </div>
  );
}

export default ScrollDetector;

在上面的代码中，我们创建了一个名为 ScrollDetector 的组件。在组件的效果循环中，我们使用了 useRef 钩子来引用滚动容器，并在滚动事件处理程序中检测滚动位置、滚动百分比和滚动方向。

通过将 ScrollDetector 组件添加到你的应用程序中，并确认滚动容器已正确设置（高度不为 auto、overflow 属性设置为 auto 或 scroll），你将能够在滚动视图中检测滚动的单向范围。

希望这个解决方案对你有所帮助！