Почти каждый начинающий разработчик при работе с модальными окнами сталкивается с проблемой внутреннего и внешнего скролла: при достижении края прокрутки модалки взаимодействие переключается на прокрутку страницы.

Стандартным решением этой проблемы является отключение скролла у всей страницы вцелом при помощи:

```css
body.modal-open {
  overflow-y: hidden;
}
```

Но что, если мы хотим сохранить внешний скролл и просто изменить это поведение? 

Это стало возможным с появлением свойства `overscroll-behavior`

Свойство имеет 3 возможных значения:
1) `auto` (по-умолчанию) — при достижении края внутреннего скролла, взаимодействие автоматически переходит на внешний
2) `contain` — отключает переход на внешний скролл, но сохраняет "отскок" на мобильных устройствах при достижении края прокрутки
3) `none` — отключает переход на внешний скролл и отключает "отскок" на мобильных устройствах при достижении края прокрутки

```css
overscroll-behavior: none;
```

Поддержка браузерами [широкая](https://caniuse.com/?search=overscroll-behavior)

#cssOnly Решена проблема с внешними скроллами | overscroll-behavior

*Пример того о чем пойдет речь:*

<CardsExample
itemsJson='[
  {"id":0,"title":"Card 1"},
  {"id":1,"title":"Card 2"},
  {"id":2,"title":"Card 3"}
]'
/>

## CSS

Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент.

```css
.wrapper {
  display: flex;
  gap: 8px;
  flex-direction: row;
  flex-wrap: nowrap;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  /* NOTE: [1/2] Если нужны первая и последняя по центру */
  padding-left: 10%;
  padding-right: 10%;
}

.wrapper::-webkit-scrollbar {
  display: none;
}

.cardWrapper {
  scroll-snap-align: center;

  /* NOTE: [2/2] Если нужен хвост и перед, но [1/2] выключено */
  min-width: 100%;
  width: 100%;
}

.card {
  height: 100%;
  padding: 8px 8px 8px 8px;
  border-radius: 8px;
  font-size: small;
  border: 1px solid #959eaa;
}
```

## React-компонент с перелистыванием карочек

### `SubjobsExperimentalCards.tsx`
```tsx
import { CSSProperties, memo } from 'react'
import classes from './SubjobsExperimentalCards.module.scss'

const genericMemo: <T>(component: T) => T = memo

type TProps<T> = {
  wrapperStyles?: CSSProperties;
  items: T[];
  cardRenderer: (ps: { itemData: T }) => React.ReactNode;
  getItemKey: (itemData: T) => string;
}

function _SubjobsExperimentalCards<TItem>({
  wrapperStyles,
  items,
  cardRenderer,
  getItemKey,
}: TProps<TItem>) {
  return (
    <>
      {
        items.length > 0 && (
          <div
            style={wrapperStyles}
            className={classes.wrapper}
          >
            {
              items.map((item) => {
                return (
                  <div
                    className={classes.cardWrapper}
                    key={getItemKey(item)}

                  >
                    {cardRenderer({ itemData: item })}
                  </div>
                )
              })
            }
          </div>
        )
      }
    </>
  )
}

export const SubjobsExperimentalCards = genericMemo(_SubjobsExperimentalCards)
```

### Usage
```tsx
<SubjobsExperimentalCards
  items={[
    { id: 1 }
  ]}
  cardRenderer={({ itemData }) => (
    return (
      <div>{itemData.id}</div>
    )
  )}
  getItemKey={(item) => String(item.id)}
/>
```

See also
- https://habr.com/ru/articles/498456/
- https://doka.guide/css/scroll-snap-type/

cssOnly

#cssOnly Решена проблема с внешними скроллами | overscroll-behavior

#cssOnly #reactComponent Компонент с перелистыванием карточек | scroll-snap-type