Реализовать scroll-snap-type на чистом javaScript

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

удалось сделать это с помощью скрипта где есть функция preventDefault()

Но помимо этого мне надо что бы скрол фиксировался на каждом блоке (.box)

пробовал сделать с помощью css свойства scroll-snap-type: mandatory; не работает

предполагаю что preventDefault() помимо всего отключает и это свойство (scroll-snap-type: mandatory;)

Как реализовать это свойство с помощью javaScript?

<div class="wrapper">
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</div>

<style>

.wrapper {
  display: flex;
  flex-flow: row nowrap;
  scroll-snap-type: mandatory;
}

.box {
  width: 100vw;
  height: 100vh;
  border: 1px solid black;
  scroll-snap-align: start;
}

</style>


<script>

const container = document.querySelector('.wrapper');



container.addEventListener('wheel', (e) => {

e.preventDefault();

container.scrollLeft += e.deltaY;

})

</script>