如何使用React Scrollama实现水平滚动？相关叙事组件咨询

React Scrollama 是否仅支持垂直滚动？ #

不是，React Scrollama默认针对垂直滚动设计，但它提供了自定义配置项来支持水平滚动场景，并非只能处理垂直滚动。

如何使用 React Scrollama 实现水平滚动？ #

核心是通过配置和布局调整适配水平滚动逻辑，步骤如下：

• 在 Scrollama 组件中设置 scrollOrientation="horizontal"，明确让库监听水平滚动事件
• 调整页面布局：将触发元素（trigger）和内容元素（step）放在横向容器内，比如用 display: flex; overflow-x: auto; 让容器支持横向滚动
• 自定义触发逻辑：通过 onStepEnter 和 onStepExit 回调，根据滚动位置更新内容状态，比如切换激活的step、触发动画等
• 可选：设置 offset 参数（范围0-1），控制触发回调时元素相对于视口的水平位置，比如 offset={0.5} 表示元素到达视口中间时触发

示例代码片段：

import Scrollama from 'react-scrollama';
import { useState } from 'react';

function HorizontalScrollStory() {
  const [activeIndex, setActiveIndex] = useState(-1);

  const handleStepEnter = ({ index }) => {
    setActiveIndex(index);
  };

  const handleStepExit = ({ index }) => {
    if (activeIndex === index) setActiveIndex(-1);
  };

  return (
    <div style={{ display: 'flex', overflowX: 'auto', height: '100vh' }}>
      <Scrollama
        scrollOrientation="horizontal"
        offset={0.5}
        onStepEnter={handleStepEnter}
        onStepExit={handleStepExit}
      >
        {[1,2,3,4].map((item, idx) => (
          <div key={idx} style={{ minWidth: '100vw', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
            <div data-scrollama-step style={{ width: '100%', height: '100%' }}></div>
            <div className={activeIndex === idx ? 'active' : ''} style={{ fontSize: '2rem' }}>
              第{idx+1}段叙事内容
            </div>
          </div>
        ))}
      </Scrollama>
    </div>
  );
}

是否存在适配水平滚动叙事场景的组件？ #

有几种实用选择：

• 自定义封装组件：基于 React Scrollama 封装专属的水平叙事组件，整合布局、滚动逻辑和状态管理，方便跨项目复用
• 现成组件：比如react-horizontal-scrolling-menu（侧重菜单式水平滚动交互）、react-scroll-parallax（支持水平滚动视差效果，适配叙事场景），这类组件内置了水平滚动的交互和布局逻辑，能快速搭建叙事页面

内容的提问来源于stack exchange，提问作者shoji