Как сделать горизонтальный скролл стрелками?

Question

[Александр]

Как можно сделать горизонтальный скролл стрелками? Т.е чтобы вместо полосы прокрутки были стрелки которые бы выполняли функцию скролла в право и лево.

Comments

[Adamos]

Повесить обработчик нажатия клавиш, который это будет делать.
Если попробовать это погуглить, нынешний ИИ даже готовый скрипт выдаст.

Answer 1

[Николай]

1- Вам нужно пределить контейнер, который вы будете инициализировать, не важно, это вся страница или что-то внутри страницы со скроллом.
2- Задать свдиг на сколько пикселей вам надо крутить контейнер.
3- В идеале, еще через обсервер смотреть, находитесь ли вы в видимой области экрана, если да, то , автоматически ставить слушатели, если нет, то убирать их, чтобы они просто так не работали, если вы вне зоны области
Важный момент, вы хотите сделать чтобы стрелки были статичны или названия классов тоже передавать туда ?

Примерный код будет такой

const scroll = new HorizontalScroll('#scrollContainer1', {
    scrollStep: 400, // шаг в пикселях
    scrollBehavior: 'smooth' // плавная прокрутка
});

class HorizontalScroll {
            constructor(container, options = {}) {
                this.container = typeof container === 'string' 
                    ? document.querySelector(container) 
                    : container;
                
                this.options = {
                    scrollStep: 300,
                    scrollBehavior: 'smooth',
                    ...options
                };
                
                this.content = this.container.querySelector('.scroll-content'); // если нужно, чтобы вы передавали классы, можно сделать в виде опшинов и объект со значением. 
                this.leftArrow = this.container.querySelector('.scroll-arrow.left');
                this.rightArrow = this.container.querySelector('.scroll-arrow.right');
                
                this.isInViewport = false;  //переменная, которая как раз смотрит и говорит, есть ли скроллы в зоне видимости или нет
                this.observer = null;   // обсервер, если вам нужен
                
                this.init();
            }
            
            init() {
                // Инициализация Intersection Observer
                this.initObserver(); // метод, логику думаю можно описать
                 
                // Обновление состояния стрелок
                this.updateArrows();
                
                // Обработка изменения размера окна
                window.addEventListener('resize', () => this.updateArrows());
                
                // Обработка скролла контента
                this.content.addEventListener('scroll', () => this.updateArrows());


            } 
      }
}