Компонент ScrollShadow добавляет тени по краям прокручиваемой области, указывая на наличие скрытого контента. Тени автоматически появляются и исчезают в зависимости от положения прокрутки.
- Основное назначение: визуальная индикация возможности прокрутки контента.
- Ключевые возможности:
- Поддержка вертикальной, горизонтальной и обеих ориентаций одновременно.
- Автоматическое определение переполнения через
ResizeObserver и события scroll. - Настройка размера тени (
size) и смещения активации (offset). - Отключение через
isEnabled. - Оптимизация производительности через debounce (100 мс).
- Публичный метод
recalculate() для принудительного пересчёта.
| Проп | Тип | По умолчанию | Описание |
|---|
orientation | String | 'vertical' | Ориентация прокрутки. Возможные значения: 'vertical', 'horizontal', 'both'. |
size | Number | 10 | Размер тени. Конвертируется в rem по формуле size / 4. |
offset | Number | 0 | Смещение в пикселях до активации тени. Тень появляется, когда прокрутка превышает это значение. |
isEnabled | Boolean | true | Включает отображение теней. При false все data-атрибуты удаляются. |
component | String | Object | 'div' | Позволяет заменить корневой HTML-тег или передать компонент. |
| Метод | Описание |
|---|
recalculate() | Принудительно пересчитывает переполнение и обновляет тени. Полезно при динамическом изменении контента. |
Компонент устанавливает следующие data-атрибуты на корневой элемент:
| Атрибут | Значение | Условие |
|---|
data-top-scroll | 'true' | Есть контент выше видимой области. |
data-bottom-scroll | 'true' | Есть контент ниже видимой области. |
data-top-bottom-scroll | 'true' | Есть контент и выше, и ниже видимой области. |
data-left-scroll | 'true' | Есть контент левее видимой области. |
data-right-scroll | 'true' | Есть контент правее видимой области. |
data-left-right-scroll | 'true' | Есть контент и левее, и правее видимой области. |
Тени отображаются через CSS-псевдоэлементы ::before и ::after на основе этих атрибутов.
| Переменная | Описание |
|---|
--scroll-shadow-size | Размер тени в rem. |
--scroll-shadow-color | Цвет тени. По умолчанию: hsl(0 0% 0% / 0.06). |
