scroll-snap in css is not working properly

Asked

Viewed 42 times

2

I am creating an html page and am having the following problem: I had to use the method scroll-snap css to 'lock' a div at each mouse scroll. This 'snap' is working with a however, when 'roll' the mouse scroll it hangs in the second div below the one I am, instead of locking in the next, as if it ran twice. Follows the code:

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>

css html5 css3 rolling

  • Try to put scroll-snap-stop: always; and forehead, if it works out tell me that I put as answer :)

No answers

Browser other questions tagged css html5 css3 rolling

You are not signed in. Login or sign up in order to post.