title: Can't get scroll-snap-type to work after setting overflow:hidden to body
body: <p>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.</p>
  <p>This is the CSS I wrote:</p>
  <pre><code>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;
  }
  </code></pre>
  <p>This does not work. I searched for solutions and I found that you had to add the following:</p>
  <pre><code>body {
      overflow: hidden;
  }
  </code></pre>
  <p>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.</p>
  <p>WHat am I missing?</p>