Rxjs & React 滚动

import { useEffect, useRef } from 'react';
import { fromEvent } from 'rxjs';
import { throttleTime, map } from 'rxjs/operators';

const useScrollAnimation = () => {
  const scrollRef = useRef(null);

  useEffect(() => {
    const scrollElement = scrollRef.current;

    if (!scrollElement) return;

    const scroll$ = fromEvent(scrollElement, 'scroll').pipe(
      throttleTime(100),
      map(() => scrollElement.scrollTop)
    );

    const subscription = scroll$.subscribe((scrollPosition) => {
      console.log('Scroll position:', scrollPosition);
      // 在这里根据滚动位置执行动画效果
      // 可以根据 scrollPosition 来触发动画效果的改变
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  return scrollRef;
};

export default useScrollAnimation;

import React from 'react';
import useScrollAnimation from './useScrollAnimation';

const ScrollAnimationComponent = () => {
  const scrollRef = useScrollAnimation();

  return (
    <div
      ref={scrollRef}
      style={{
        height: '500px',
        overflowY: 'scroll',
      }}
    >
      {/* Your content here */}
    </div>
  );
};

export default ScrollAnimationComponent;