Estou criando uma página em html e estou tendo o seguinte problema:
Precisei utilizar o método scroll-snap
do css para 'travar' uma div a cada rolagem do mouse. Esse 'snap' está funcionando com um porém, quando 'rolo' o scroll do mouse ele trava na segunda div abaixo da que estou, ao invés de travar na próxima, como se executasse duas vezes.
Segue o código:
html {
scroll-snap-type: y mandatory;
transition: all .3s ease-in-out;
}
.item {
height: 80vh;
scroll-snap-align: start;
border-bottom: black thin solid;
font-size: xx-large;
}
<body>
<div id="container">
<div class="item">ITEM 1</div>
<div class="item">ITEM 2</div>
<div class="item">ITEM 3</div>
<div class="item">ITEM 4</div>
<div class="item">ITEM 5</div>
<div class="item">ITEM 6</div>
</div>
</body>
scroll-snap-stop: always;
e testa, se der certo me fala que posto como resposta :)