react-scroll-snap

一个基于 React 的滚动快照组件

DEMO

安装

yarn add @epeejs/react-scroll-snap

用法

import ScrollSnap, { ScrollSnapAction } from '@epeejs/react-scroll-snap';
import React, { useEffect, useRef } from 'react';

const App = () => {
  const actionRef = useRef<ScrollSnapAction>();
  const colors = ['#E6F7FF', '#BAE7FF', '#91D5FF', '#69C0FF'];

  useEffect(() => {
    if (actionRef.current) {
      // 初始化时滑动到第三个元素
      actionRef.current.goTo(2);
    }
  }, []);

  return (
    <ScrollSnap
      actionRef={actionRef}
      onChange={(current) => {
        console.log(current);
      }}
    >
      {colors.map((m) => (
        <div
          style={{
            background: m,
            width: '80%',
            borderRadius: 16,
            height: 300,
            flexShrink: 0,
            // 设置停留时元素居中
            scrollSnapAlign: 'center',
          }}
        >
          {m}
        </div>
      ))}
    </ScrollSnap>
  );
};

API

属性	说明	类型	默认值	版本
onChange	切换面板后的回调	function(current:number)
actionRef	操作函数	ScrollSnapAction

方法

ScrollSnapAction

名称	描述
goTo(index)	切换到指定面板