Can't get scroll-snap-type to work after setting overflow:hidden to body

Question

I have a webpage with a container div and within it three sections and a footer. What I want is for all of the sections and footer to occupy the height of the browser window. If I scroll I want the next section to snap into place so that it too occupies the full height of the browser.

This is the CSS I wrote:

div.container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}
section, footer {
    width: 100%;
    min-height: 100vh;
    color: #fff;
    scroll-snap-align: center;
}
section.description, section.quotes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

This does not work. I searched for solutions and I found that you had to add the following:

body {
    overflow: hidden;
}

But this didn't work either. While before adding this, the scroll worked but without snapping, after adding overflow: hidden to the body, I can no longer scroll out of the first section.

WHat am I missing?