세로 스크롤 메뉴 — 같은 컴포넌트를 CSS로 돌림

vertical 프로퍼티는 없고, 필요도 없습니다. 메뉴는 네이티브 스크롤 컨테이너 안의 flex 행이므로, 아래로 향하게 하는 것은 CSS 오버라이드 몇 개입니다. 가시성 추적, 화살표 훅, scrollPrev/scrollNext 모두 새 축에서 계속 동작합니다.

열 위에서 휠을 굴리거나 화살표를 쓰세요 — Up과 Down은 ScrollMenu의 Header와 Footer입니다. 행은 뷰를 떠날 때 흐려집니다.

이 예제를 Storybook에서 라이브 편집

오버라이드 둘과 높이 경계 하나

스토리는 라이브러리의 두 클래스 이름을 재스타일합니다. 스크롤 컨테이너는 기본 max-content 대신 flex-direction: column, overflow-y: auto, height: initial을 얻고, 래퍼는 height: 100%를 얻어 부모의 고정 높이가 그대로 스크롤 경계가 됩니다. 그것이 세로 모드의 전부입니다. 스토리는 emotion으로 오버라이드를 적용하고, 이 페이지의 데모는 대신 wrapperClassName과 scrollContainerClassName 프로퍼티로 Tailwind 유틸리티를 넘깁니다 — 어떤 스타일 경로든 동작하고, 클래스 이름은 안정적입니다.

화살표가 Header와 Footer가 됨

LeftArrow/RightArrow 슬롯은 레일 옆에 렌더링됩니다 — 열에는 잘못된 자리입니다. ScrollMenu는 위아래에 렌더링되는 Header와 Footer 컴포넌트도 받고, 스토리는 거기에 Up과 Down 버튼을 마운트합니다. 그것들은 평범한 VisibilityContext 소비자입니다. useIsVisible('first', true)는 맨 위에서 Up을 비활성화하고, useIsVisible('last', false)는 맨 아래에서 Down을 비활성화합니다. 클릭은 세 번째 인자를 넘깁니다 — scrollPrev(undefined, undefined, 'end')와 scrollNext(undefined, undefined, 'start') — scrollIntoView의 block 위치입니다. 'end'는 이전 항목을 아래쪽 끝에 두고(온전한 한 페이지 위로), 'start'는 다음 항목을 맨 위에 둡니다(온전한 한 페이지 아래로). 기본 'nearest'에서는 각 클릭이 다음 행을 겨우 뷰로 밀어 넣을 뿐입니다.

스크롤을 열 안에 유지

scrollIntoView는 대상의 스크롤 가능한 조상을 모두 움직이고, 페이지도 그중 하나입니다 — 그래서 열 안의 block 정렬 점프는 문서 전체를 끌고 갑니다. 그 이동을 멈추는 옵션이 boundary로, 네 번째 인자로 넘깁니다: scrollNext(undefined, undefined, 'start', { boundary })에 메뉴 자신의 scrollContainer.current를 넘기면 행만 스크롤하고 나머지는 움직이지 않습니다. boundary를 이해하는 것은 폴리필뿐이므로 ScrollMenu에 noPolyfill={false}가 필요합니다 — 위의 데모는 둘 다 넘깁니다. 가로 메뉴는 이에 마주치는 일이 드뭅니다. 기본 block: 'nearest'는 애초에 페이지에 세로 움직임을 요구하지 않기 때문입니다.

가시성에는 축이 없다

useIsVisible은 IntersectionObserver가 받치고, 교차는 두 차원에서 측정됩니다 — 행은 위아래 가장자리를 가로지르며, 가로 항목이 양쪽에서 하는 것과 정확히 같은 방식으로 상태를 보고합니다. 데모는 뷰 밖 행을 흐리게 해 이를 보여주고, 훅의 defaultValue 인자로 처음 네 행을 서버에서 칠해진 가시 상태로 둡니다.

참고

고정되는 유일한 치수는 패널의 인라인 높이입니다. 래퍼의 height: 100%가 그것을 스크롤 컨테이너까지 내려보냅니다.
휠과 터치는 열을 네이티브로 스크롤합니다 — overflow-y: auto가 실제 스크롤 컨테이너로 만들기 때문입니다. 화살표는 편의이지 메커니즘이 아닙니다.
scrollPrev/scrollNext의 두 번째 인자는 inline(수평) 위치입니다 — 세로 메뉴가 신경 쓰는 것은 block이며, 스토리가 명시적으로 넘기는 이유입니다.

전체 소스

완전하고 복사-붙여넣기 가능 — 이것이 바로 그 파일입니다. 출처는, 이 라이브 편집 가능한 Storybook 버전.

Vertical.source.tsx

import 'react-horizontal-scrolling-menu/dist/styles.css';

import styled from '@emotion/styled';
import React from 'react';
import {
  type publicApiType,
  ScrollMenu,
  VisibilityContext,
} from 'react-horizontal-scrolling-menu';

const NoScrollbar = styled('div')({
  '& .react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar': {
    display: 'none',
  },
  // NOTE: also need to set on parent:
  // display: 'flex' and position: 'relative'
  '& .react-horizontal-scrolling-menu--wrapper': {
    height: '100%',
  },

  '& .react-horizontal-scrolling-menu--scroll-container': {
    height: 'initial',
    scrollbarWidth: 'none',
    '-ms-overflow-style': 'none',
    overflowY: 'auto',
    flexDirection: 'column',
  },
});

export function VerticalExample() {
  const [items] = React.useState(() => getItems());
  const [selected, setSelected] = React.useState<string[]>([]);

  const isItemSelected = (id: string): boolean =>
    !!selected.find((el) => el === id);

  const handleItemClick = (itemId: string) => {
    const itemSelected = isItemSelected(itemId);

    setSelected((currentSelected: string[]) =>
      itemSelected
        ? currentSelected.filter((el) => el !== itemId)
        : currentSelected.concat(itemId),
    );
  };

  return (
    <NoScrollbar>
      <ScrollMenu Header={UpArrow} Footer={DownArrow}>
        {items.map(({ id }) => (
          <Card
            title={id}
            itemId={id} // NOTE: itemId is required for track items
            key={id}
            onClick={() => handleItemClick(id)}
            selected={isItemSelected(id)}
          />
        ))}
      </ScrollMenu>
    </NoScrollbar>
  );
}

export default VerticalExample;

function UpArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isFirstItemVisible = visibility.useIsVisible('first', true);

  return (
    <Arrow
      disabled={isFirstItemVisible}
      onClick={() => visibility.scrollPrev(undefined, undefined, 'end')}
      testId="up-arrow"
    >
      Up
    </Arrow>
  );
}

function DownArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isLastItemVisible = visibility.useIsVisible('last', false);

  return (
    <Arrow
      disabled={isLastItemVisible}
      onClick={() => visibility.scrollNext(undefined, undefined, 'start')}
      testId="down-arrow"
    >
      Down
    </Arrow>
  );
}

function Arrow({
  children,
  disabled,
  onClick,
  className,
  testId,
}: {
  children: React.ReactNode;
  disabled: boolean;
  onClick: VoidFunction;
  className?: string;
  testId: string;
}) {
  return (
    <ArrowButton
      disabled={disabled}
      onClick={onClick}
      className={'arrow' + `-${className}`}
      data-testid={testId}
    >
      {children}
    </ArrowButton>
  );
}
const ArrowButton = styled('button')((props) => ({
  cursor: 'pointer',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center',
  marginBottom: '2px',
  opacity: props.disabled ? '0' : '1',
  userSelect: 'none',
  borderRadius: '6px',
  borderWidth: '1px',
}));

function Card({
  onClick,
  selected,
  title,
  itemId,
}: {
  onClick: (context: publicApiType) => void;
  selected: boolean;
  title: string;
  itemId: string;
}) {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isVisible = visibility.useIsVisible(itemId, true);

  return (
    <CardBody
      data-cy={itemId}
      onClick={() => onClick(visibility)}
      onKeyDown={(ev: React.KeyboardEvent) => {
        ev.code === 'Enter' && onClick(visibility);
      }}
      data-testid="card"
      role="button"
      tabIndex={0}
      className="card"
      visible={isVisible}
      selected={selected}
    >
      <div className="header">
        <div>{title}</div>
        <div className="visible">visible: {JSON.stringify(isVisible)}</div>
        <div className="selected">selected: {JSON.stringify(!!selected)}</div>
      </div>
      <div className="background" />
    </CardBody>
  );
}
const CardBody = styled('div')<{ selected?: boolean; visible?: boolean }>(
  (props) => ({
    border: '1px solid',
    display: 'inline-block',
    margin: '0 10px',
    width: '160px',
    userSelect: 'none',
    borderRadius: '8px',
    overflow: 'hidden',

    '& .header': {
      backgroundColor: 'white',
    },

    '& .visible': {
      backgroundColor: props.visible ? 'transparent' : 'gray',
    },

    '& .background': {
      backgroundColor: props.selected ? 'green' : 'bisque',
      height: '125px',
    },
  }),
);

const getId = (index: number) => `${'test'}${index}`;

const getItems = () =>
  Array(10)
    .fill(0)
    .map((_, ind) => ({ id: getId(ind) }));