Как решить эту странную проблему с прокруткой? ⇐ CSS

[Anonymous]

Я написал следующий код, используя TailwindCSS и jQuery, но обнаружил, что функция прокрутки работает неправильно. Однако когда я открываю консоль браузера, высота страницы уменьшается, и в этот момент мой код работает как положено. Я не уверен, что является причиной этой проблемы и как ее правильно устранить.
Вот соответствующий демонстрационный GIF-файл.
https://imgur.com/gfqyIQM
(Использование внешних изображений связано с постоянными сбоями при загрузке.)
Я пробовал изменять части кода, но это не помогло. Работает только когда консоль открыта (может потому что высота уменьшается?). Я надеюсь добиться горизонтальной прокрутки с помощью колеса мыши в нормальных условиях.

Код: Выделить всё

$('#imageContainer').on('wheel', function(event) {
event.preventDefault();
$(this).scrollLeft($(this).scrollLeft() + event.originalEvent.deltaY);
});

Код: Выделить всё

.mx-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}

.mt-6 {
margin-top: 1.5rem;
}

.flex {
display: flex;
}

.h-\[60dvh\] {
height: 60dvh;
}

.w-\[35dvh\] {
width: 35dvh;
}

.w-fit {
width: fit-content;
}

.snap-x {
scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
--tw-scroll-snap-strictness: mandatory;
}

.snap-start {
scroll-snap-align: start;
}

.overflow-x-scroll {
overflow-x: scroll;
}

.scroll-smooth {
scroll-behavior: smooth;
}

.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

Код: Выделить всё

[img]https://via.placeholder.com/400x600/ff7f7f/333333?text=Image+1[/img]
[img]https://via.placeholder.com/400x600/7f7fff/333333?text=Image+2[/img]
[img]https://via.placeholder.com/400x600/7fff7f/333333?text=Image+3[/img]

Подробнее здесь: https://stackoverflow.com/questions/790 ... ll-problem