Плавная горизонтальная прокрутка к разделу ⇐ Html

[Anonymous]

Я создаю горизонтальный веб-сайт. Каждая страница имеет несколько разделов.
Я пытаюсь создать следующую функциональность: когда пользователь прокручивает вправо, страница должна прокручиваться до следующего доступного раздела. Если пользователь прокручивает страницу влево – возврат к предыдущему разделу. Я использую видимую библиотеку jQuery, чтобы проверить, какой раздел виден в области просмотра.
До сих пор я пробовал разные методы, но ни один из них не работает должным образом.
Я буду признателен за любую помощь или указания.
Вот мой код:
HTML









JavaScript/jQuery (один метод)
let lastScroll = 0;

$('#main').on('scroll', function(event) {

let st = $(this).scrollLeft();

// Scrolling forward
if (st > lastScroll && $('.wrapper .section:nth-child(1)').visible(true) ) {
document.getElementById('secondSection').scrollIntoView({
behavior: 'smooth',
});
}

if (st > lastScroll && $('.wrapper .section:nth-child(2)').visible(true) ) {
document.getElementById('thirdSection').scrollIntoView({
behavior: 'smooth',
});
}

// Scrolling back
if (st < lastScroll && $('.wrapper .section:nth-child(2)').visible(true) ) {
document.getElementById('firstSection').scrollIntoView({
behavior: 'smooth',
});
}

if (st < lastScroll && $('.wrapper .section:nth-child(3)').visible(true) ) {
document.getElementById('secondSection').scrollIntoView({
behavior: 'smooth',
});
}

lastScroll = st;
});

JavaScript/jQuery (другой метод)
window.addEventListener("wheel", function (e) {
// Scrolling forward
if ( e.deltaY > 0 && $('.wrapper .section:nth-child(1)').visible(true) ) {
document.getElementById('secondSection').scrollIntoView({
behavior: 'smooth',
});
}

if ( e.deltaY > 0 && $('.wrapper .section:nth-child(2)').visible(true) ) {
document.getElementById('thirdSection').scrollIntoView({
behavior: 'smooth',
});
}

// Scrolling back
if ( e.deltaY < 0 && $('.wrapper .section:nth-child(2)').visible(true) ) {
document.getElementById('firstSection').scrollIntoView({
behavior: 'smooth',
});
}

if ( e.deltaY > 0 && $('.wrapper .section:nth-child(3)').visible(true) ) {
document.getElementById('secondSection').scrollIntoView({
behavior: 'smooth',
});
}
});


Подробнее здесь: https://stackoverflow.com/questions/726 ... -a-section