Прокрутка на JS

You can achieve this by using JavaScript to manipulate the scrollLeft property of the container element when the buttons are clicked. Here is an example implementation:

Assuming your HTML looks something like this:

<div id="container">
<div id="content">...</div>
</div>
<button id="scrollLeftBtn">◄</button>
<button id="scrollRightBtn">►</button>
And your CSS looks like this:

#container {
display: flex;
overflow: auto;
}
You can use the following JavaScript to implement the scrolling functionality:

const container = document.getElementById("container");
const scrollLeftBtn = document.getElementById("scrollLeftBtn");
const scrollRightBtn = document.getElementById("scrollRightBtn");

scrollLeftBtn.addEventListener("click", () => {
container.scrollLeft -= 100; // Change value to adjust speed of scroll
});

scrollRightBtn.addEventListener("click", () => {
container.scrollLeft += 100; // Change value to adjust speed of scroll
});
This code listens to the "click" event on the left and right buttons and adjusts the container element's scrollLeft property by an amount depending on the button that was clicked. You can adjust the amount to your desired value.

Плавный скроллинг обеспечивать мне честно говоря лень.

 .content__box { 

   width: 400px; 

   height: 450px; 

   background: #000; 

} 

 

.content__scroll { 

   display: flex; 

   align-items: center; 

   flex-shrink: 0; 

   width: 400px; 

   height: 400px; 

   overflow: auto; 

} 

 

.content__scroll div { 

   min-width: 800px; 

   height: 200px; 

   background: #fff; 

} 

 

.content__buttons { 

   display: flex; 

   width: 100%; 

   height: 50px; 

} 

 

.content__button { 

   width: 50%; 

   height: 100%; 

} 

 const block = document.querySelector('.content__scroll'); 

const btns = document.querySelectorAll('.content__button'); 

 

btns.forEach(btn => btn.addEventListener('click', ({target}) => { 

   const scroll = block.scrollLeft; 

   target.dataset.arrow === 'R' ? 

   block.scrollTo(scroll + 100, 0) : 

   block.scrollTo(scroll - 100, 0); 

})); 

HTML:

  

   

     

   

 

 

◄ 

►  

CSS:

 .scroll-container { 

  display: flex; 

  overflow: auto; 

} 

 

.scroll-content { 

  /* стили контента */ 

} 

 

.scroll-button-left, 

.scroll-button-right { 

  /* стили кнопок */ 

}  

JavaScript:

 const container = document.querySelector('.scroll-container'); 

const content = document.querySelector('.scroll-content'); 

const buttonLeft = document.querySelector('.scroll-button-left'); 

const buttonRight = document.querySelector('.scroll-button-right'); 

 

buttonLeft.addEventListener('click', () => { 

  container.scrollLeft -= 100; // изменяем свойство scrollLeft на 100 пикселей влево 

}); 

 

buttonRight.addEventListener('click', () => { 

  container.scrollLeft += 100; // изменяем свойство scrollLeft на 100 пикселей вправо 

});  

В данном примере кнопки с классами .scroll-button-left и .scroll-button-right назначаются обработчики событий click, которые изменяют свойство scrollLeft у блока с классом .scroll-container. Значение свойства scrollLeft задает количество пикселей, на которое нужно прокрутить содержимое блока влево или вправо. В данном случае значение равно 100 пикселям, но его можно изменить на любое другое.

Для реализации плавной прокрутки вместо изменения значения свойства scrollLeft напрямую, можно воспользоваться методом scrollBy или scrollTo, которые позволяют задать опции для плавного скроллинга.

Например, для метода scrollBy можно передать два аргумента: количество пикселей, на которое нужно прокрутить по горизонтали и вертикали, и опции объекта, который позволяет задать плавность прокрутки. Для этого нужно установить свойство behavior в значение "smooth".

JavaScript:

 buttonLeft.addEventListener('click', () => { 

  container.scrollBy({ 

    left: -100, // прокручиваем влево на 100 пикселей 

    behavior: 'smooth' // плавная прокрутка 

  }); 

}); 

 

buttonRight.addEventListener('click', () => { 

  container.scrollBy({ 

    left: 100, // прокручиваем вправо на 100 пикселей 

    behavior: 'smooth' // плавная прокрутка 

  }); 

});  

Для метода scrollTo также можно задать опции плавной прокрутки.

JavaScript:

 buttonLeft.addEventListener('click', () => { 

  container.scrollTo({ 

    left: container.scrollLeft - 100, // прокручиваем влево на 100 пикселей от текущего положения 

    behavior: 'smooth' // плавная прокрутка 

  }); 

}); 

 

buttonRight.addEventListener('click', () => { 

  container.scrollTo({ 

    left: container.scrollLeft + 100, // прокручиваем вправо на 100 пикселей от текущего положения 

    behavior: 'smooth' // плавная прокрутка 

  }); 

});  

В обоих примерах метод scrollBy или scrollTo вызывается с опциями объекта, который задает направление и плавность прокрутки. В данном случае плавность прокрутки устанавливается, устанавливая свойство behavior в значение "smooth".