Фиксированные и прокручиваемые области

В Ant Design работа с фиксированными и прокручиваемыми областями реализуется преимущественно через компоненты Layout, Affix, Anchor и таблицы Table с возможностью закрепления колонок и заголовков. Правильное использование этих инструментов позволяет создавать интерфейсы с удобной навигацией, где критические элементы остаются видимыми при прокрутке страницы или отдельных блоков.

Компонент Layout и фиксированные панели

Layout — это базовый строительный блок для структурирования страницы. Он предоставляет следующие основные элементы:

  • Header — верхняя панель.
  • Sider — боковая панель.
  • Content — основная область контента.
  • Footer — нижняя часть страницы.
import { Layout, Menu } from 'antd';
const { Header, Sider, Content, Footer } = Layout;

<Layout>
  <Sider width={200} style={{ height: '100vh', position: 'fixed', left: 0 }}>
    <Menu mode="inline">
      <Menu.Item key="1">Пункт 1</Menu.Item>
      <Menu.Item key="2">Пункт 2</Menu.Item>
    </Menu>
  </Sider>
  <Layout style={{ marginLeft: 200 }}>
    <Header style={{ background: '#fff', padding: 0 }}>Заголовок</Header>
    <Content style={{ margin: '24px 16px 0', overflow: 'auto', height: 'calc(100vh - 64px)' }}>
      Основной контент
    </Content>
    <Footer style={{ textAlign: 'center' }}>Footer</Footer>
  </Layout>
</Layout>

Ключевые моменты:

  • Использование position: fixed у боковой панели (Sider) закрепляет её при прокрутке контента.
  • Основная область (Content) получает overflow: auto для внутренней прокрутки.
  • Высота контента вычисляется динамически через calc(100vh - HeaderHeight).

Affix для закрепления элементов

Компонент Affix позволяет закреплять любой элемент при прокрутке страницы, сохраняя его в видимой области.

import { Affix, Button } from 'antd';

<Affix offsetTop={10}>
  <Button type="primary">Закрепленная кнопка</Button>
</Affix>

Особенности:

  • offsetTop задаёт расстояние от верхнего края окна.
  • Поддерживаются события onChange, позволяющие отслеживать момент фиксации.
  • Может использоваться для кнопок, панелей инструментов или заголовков внутри прокручиваемого блока.

Прокручиваемые таблицы с фиксированными заголовками и колонками

Table в Ant Design поддерживает опции scroll и fixed для создания прокручиваемых таблиц с закреплёнными элементами.

const columns = [
  { title: 'Имя', dataIndex: 'name', key: 'name', fixed: 'left', width: 150 },
  { title: 'Возраст', dataIndex: 'age', key: 'age', width: 100 },
  { title: 'Адрес', dataIndex: 'address', key: 'address', width: 200 },
  { title: 'Профессия', dataIndex: 'profession', key: 'profession', width: 200 },
  { title: 'Компания', dataIndex: 'company', key: 'company', width: 200, fixed: 'right' },
];

const data = Array.from({ length: 50 }, (_, i) => ({
  key: i,
  name: `Имя ${i}`,
  age: 20 + (i % 10),
  address: `Адрес ${i}`,
  profession: `Профессия ${i}`,
  company: `Компания ${i}`,
}));

<Table
  columns={columns}
  dataSource={data}
  scroll={{ x: 1000, y: 400 }}
/>

Особенности:

  • scroll.x задаёт горизонтальную прокрутку.
  • scroll.y — вертикальную прокрутку.
  • Свойство fixed позволяет закреплять колонки слева или справа.
  • Для больших таблиц с динамическими данными критически важно задавать фиксированную ширину колонок.

Anchor и боковая навигация

Компонент Anchor позволяет создавать прокручиваемую навигацию, где элементы фиксируются при скролле страницы.

import { Anchor } from 'antd';
const { Link } = Anchor;

<Anchor affix={true}>
  <Link href="#section1" title="Секция 1" />
  <Link href="#section2" title="Секция 2" />
  <Link href="#section3" title="Секция 3" />
</Anchor>

Особенности:

  • affix={true} закрепляет якорь при прокрутке.
  • Позволяет динамически подсвечивать текущую секцию.
  • Отлично комбинируется с Layout.Sider для боковой панели навигации.

Прокрутка внутри контейнеров

Ant Design предоставляет возможность создавать внутреннюю прокрутку для блоков Content или кастомных div. Это полезно для модальных окон, карточек и таблиц.

import { Card } from 'antd';

<Card style={{ height: 300, overflow: 'auto' }}>
  {Array.from({ length: 50 }, (_, i) => (
    <p key={i}>Элемент {i}</p>
  ))}
</Card>

Рекомендации:

  • Всегда задавать высоту контейнера при использовании overflow: auto.
  • Можно комбинировать с Affix для закрепления кнопок или фильтров внутри прокручиваемого блока.
  • Использовать style={{ overflowY: 'scroll' }} для явного отображения вертикальной прокрутки.

Сочетание фиксированных элементов и прокрутки

Частая задача интерфейса — комбинировать несколько закреплённых областей: шапку, боковое меню и таблицу с прокруткой. Рекомендуется:

  1. Закрепить шапку через Header или Affix.
  2. Закрепить боковую панель через Sider с position: fixed.
  3. Использовать scroll у таблиц для внутренних данных.
  4. Вычислять высоту контента динамически для корректной работы вертикальной прокрутки.

Пример комбинированного подхода:

<Layout>
  <Header style={{ position: 'fixed', width: '100%', zIndex: 100 }}>Шапка</Header>
  <Layout>
    <Sider style={{ position: 'fixed', top: 64, height: 'calc(100vh - 64px)' }}>Меню</Sider>
    <Content style={{ marginLeft: 200, marginTop: 64, height: 'calc(100vh - 64px)', overflow: 'auto' }}>
      <Table columns={columns} dataSource={data} scroll={{ y: 600, x: 1200 }} />
    </Content>
  </Layout>
</Layout>

Использование этих компонентов в комбинации обеспечивает гибкость интерфейса и позволяет создавать страницы с удобной прокруткой, где ключевые элементы остаются видимыми и доступными в любой момент.

Оглавление