Ви можете додати до нього горизонтальну прокрутку, виконавши такі дії:
- Загорніть все в основний батьківський контейнер.
- Створіть приклад класу (horizontal-scroll), додайте стиль: "width: 100%; overflow-x: scroll;"
- Використовуйте створений клас у головному батьківському контейнері.
Перетворення певної області вмісту на прокручування здійснюється за допомогою використання властивості переповнення CSS. Нижче наведено різні значення властивості переповнення. visible: властивість вказує на те, що його можна відобразити за межами блоку, і він не обрізається. приховане: ця властивість вказує на те, що переповнення обрізано.
Щоб створити сувій у React, вам спочатку потрібно імпортувати React і створити компонент React. У JSX компонента ви можете використовуйте елемент div із заданою висотою та властивістю переповнення, встановленою на «scroll», щоб створити область, яку можна прокручувати.
Щоб мати сувій у div, ви повинні встановити його на вказану висоту/ширину (або максимальну висоту/ширину). Тоді ви можете додайте властивість CSS overflow: auto до свого div. Якщо вміст перевищує висоту/ширину div, з’явиться смуга прокрутки. Ви також можете налаштувати переповнення на прокручування, і смуга прокручування завжди буде видимою.
Як створити контейнери з горизонтальною прокруткою в HTML і CSS
- Крок 1. Використовуйте HTML для створення контейнера. У цьому прикладі я створив елемент контейнера <div> шириною 500 пікселів. …
- Крок 2. Використовуйте CSS, щоб указати встановлену ширину для контейнера та застосувати поведінку прокручування.