让点击的项目居中——可滚动标签页模式

每个标签页条都需要、却没有哪个滚动容器会免费给你的行为：点击一个靠近边缘的标签，它滑到中间，露出两边的邻居。这里只需一次 API 调用——无需 Material UI、无需测量、无需滚动数学。

点击靠近任一边缘的标签——它被激活并在这一行里居中。

工作原理

handleItemClick 是柯里化的：它接收 itemId，返回一个期待 API 对象的函数。点击先把这个 id 存进 selected state，再调用 api.getItemElementById(itemId) 找到真实 DOM 元素，交给 api.scrollToItem(item, ’smooth’, ’center’)。一次点击，两种效果：标签被选中并居中。

API 从何而来

父组件从不持有 API ref。每个 Card 从 VisibilityContext 读取完整 API——ScrollMenu 的任何子组件都可获得——并把它传入点击处理器：onClick(visibility)。如果你反而需要从菜单外部滚动，那是滚动到项目示例中的 apiRef 模式。

注意

scrollToItem 的第三个参数取与 scrollIntoView 的 inline 选项相同的值——’start’、’center’ 或 ’end’。
卡片可聚焦（role="button"、tabIndex=0），并在 onKeyDown 中处理回车，因此键盘用户也能获得同样的选中加居中。
onWheel 处理器把鼠标滚轮增量映射到 scrollNext/scrollPrev，但对触控板让步——水平增量或极小的垂直增量被视为手势而保持原生。
箭头用 useIsVisible(’first’) 与 useIsVisible(’last’) 这两个简写来自行禁用。

完整源码

完整且可直接复制粘贴——这正是背后这份文件的可在 Storybook 中实时编辑的版本.

CenterOnClick.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';

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

  const isItemSelected = (id: string): boolean => selected === id;

  // The Card reads the api from VisibilityContext and passes it here,
  // so a single click both selects the item and centers it.
  const handleItemClick = (itemId: string) => (api: publicApiType) => {
    setSelected(itemId);

    const item = api.getItemElementById(itemId);
    if (item) {
      api.scrollToItem(item, 'smooth', 'center');
    }
  };

  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow} onWheel={onWheel}>
      {items.map(({ id }) => (
        <Card
          title={id}
          itemId={id} // NOTE: itemId is required for track items
          key={id}
          onClick={handleItemClick(id)}
          selected={isItemSelected(id)}
        />
      ))}
    </ScrollMenu>
  );
}

export default CenterOnClick;

function LeftArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);

  const isFirstItemVisible = visibility.useIsVisible('first', true);

  return (
    <Arrow
      disabled={isFirstItemVisible}
      onClick={() => visibility.scrollPrev()}
      testId="left-arrow"
    >
      Left
    </Arrow>
  );
}

function RightArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);

  const isLastItemVisible = visibility.useIsVisible('last', false);

  return (
    <Arrow
      disabled={isLastItemVisible}
      onClick={() => visibility.scrollNext()}
      testId="right-arrow"
    >
      Right
    </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: '200px',
    },
  }),
);

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

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

function onWheel(apiObj: publicApiType, ev: React.WheelEvent): void {
  // NOTE: no good standart way to distinguish touchpad scrolling gestures
  // but can assume that gesture will affect X axis, mouse scroll only Y axis
  // of if deltaY too small probably is it touchpad
  const isThouchpad = Math.abs(ev.deltaX) !== 0 || Math.abs(ev.deltaY) < 15;

  if (isThouchpad) {
    ev.stopPropagation();
    return;
  }

  if (ev.deltaY < 0) {
    apiObj.scrollNext();
  } else {
    apiObj.scrollPrev();
  }
}

让点击的项目居中——可滚动标签页模式

工作原理

API 从何而来

注意

完整源码

相关示例