Пролистай вправо - удобная навигация для просмотра контента

Чтобы реализовать пролистывание вправо на веб-странице, можно использовать JavaScript и CSS.

Сначала нужно создать контейнер, который будет содержать контент, который нужно пролистывать. Например:

  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque maximus nunc non mauris malesuada tristique. Vivamus sit amet dolor eu felis malesuada efficitur. Sed commodo, nisi vitae commodo euismod, elit elit convallis sapien, vel finibus leo nibh eget erat. Sed ac fermentum mi, non tincidunt lectus.
  
Mauris bibendum augue sed nulla ullamcorper iaculis. Aenean tempus augue vel dolor pretium, sed lobortis tortor ullamcorper. Suspendisse potenti. Fusce sed nibh vel ipsum euismod auctor. Pellentesque lacinia sapien sed mi malesuada, ut vehicula erat ultricies. Maecenas scelerisque lectus vel sodales tempor. Fusce ut odio turpis.
  
Nulla tincidunt nibh vel leo pulvinar semper. Sed consectetur nisi non leo aliquet ultrices. Morbi sit amet dui vitae ligula bibendum convallis. Sed tincidunt pulvinar ex, in placerat dui dictum ac. Pellentesque commodo finibus tortor nec dignissim. Fusce vel rutrum elit. Curabitur fermentum erat eu eros hendrerit malesuada.

Затем нужно добавить CSS для контейнера и его содержимого:

.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
}
.scroll-container p {
  display: inline-block;
  margin-right: 10px;
  vertical-align: top;
}

Этот CSS создаст горизонтальный скроллбар для контейнера и выровняет все параграфы горизонтально.

Теперь нужно добавить JavaScript, который будет позволять пролистывать контент вправо. Можно сделать это двумя способами. Первый способ - добавить кнопки "вправо" и "влево", которые будут сдвигать контент на определенное количество пикселей вправо или влево. Например:

const container = document.querySelector('.scroll-container');
const rightArrow = document.querySelector('.right-arrow');
const leftArrow = document.querySelector('.left-arrow');
rightArrow.addEventListener('click', function() {
  container.scrollLeft += 100;
});
leftArrow.addEventListener('click', function() {
  container.scrollLeft -= 100;
});

Этот код добавляет слушателей событий для кликов на кнопках "вправо" и "влево". Когда происходит клик, контейнер сдвигается на 100 пикселей вправо или влево.

Второй способ - добавить функционал пролистывания контента при прокрутке колесика мыши. Например:

const container = document.querySelector('.scroll-container');
container.addEventListener('wheel', function(event) {
  const direction = event.deltaY > 0 ? 1 : -1;
  container.scrollLeft += direction * 100;
});

Этот код добавляет слушателя событий для колесика мыши на контейнере. Когда происходит событие, определяется направление (вверх или вниз) и контейнер сдвигается на 100 пикселей в соответствующем направлении.

В обоих примерах значение 100 для сдвига контента можно изменить на любое другое значение в зависимости от нужд и дизайна страницы.