3

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>

1
  • Tente colocar scroll-snap-stop: always; e testa, se der certo me fala que posto como resposta :)
    – hugocsl
    3/03/2021 às 15:06

1 Resposta 1

-1

Existem algumas possíveis causas para esse comportamento. Uma delas é que o atributo "scroll-snap-type" está sendo aplicado na tag "html" em vez de na tag "body". Isso pode estar causando o "snap" a ser aplicado em toda a página, em vez de apenas no conteúdo dentro do elemento "container".

Outra possibilidade é que o elemento "container" não está tendo o tamanho correto para acomodar todo o conteúdo. Isso pode estar causando o scroll a continuar rolando além do elemento "container" e, portanto, "snapping" na div seguinte.

Eu sugiro verificar se esses problemas estão ocorrendo e corrigi-los. Se esses problemas não estiverem presentes, então é possível que haja algum outro elemento ou atributo que está causando esse comportamento indesejado. Eu sugiro verificar o código completo da página e procurar por qualquer outro elemento ou atributo que possa estar interferindo na funcionalidade de "snap".

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .