Чтобы добиться эффекта горизонтальной прокрутки в CSS, вы можете использовать несколько методов. Вот некоторые из них:

1. Свойство CSS Overflow: для свойства переполнения элемента контейнера можно установить значение «авто» или «прокрутку» по горизонтальной оси. Это создаст горизонтальную прокрутку, если содержимое внутри контейнера превышает его ширину.

.container {
  overflow-x: auto;
  white-space: nowrap;
}

2. CSS Flexbox: используя flexbox, вы можете легко создать макет с горизонтальной прокруткой. Установите для контейнера гибкую ширину и используйте свойство overflow-x, чтобы включить горизонтальную прокрутку.

.container {
  display: flex;
  overflow-x: auto;
}

3. CSS-сетка. Подобно флексбоксу, CSS-сетку также можно использовать для создания макета с горизонтальной прокруткой. Настройте контейнер на использование макета сетки и настройте свойство grid-template-columns, чтобы разрешить переполнение содержимого.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  overflow-x: auto;
}

4. jQuery или JavaScript. Если вы предпочитаете использовать JavaScript, вы можете использовать библиотеку, например jQuery, для достижения эффектов горизонтальной прокрутки. Вы можете управлять позицией прокрутки элемента контейнера с помощью метода scrollLeft().

$('.container').scrollLeft(300);