title: Overflow-y: scroll creates a disabled scrollbar
body: <p>So I'm trying to create a website and I'm planning on using the scroll snap. For it to work I have to hide the overflow on the body and set the overflow on the main element to scroll. When I do this it disables the scrollbar completely. Also, if I set the height of the main container to 100vh then the scrollbar comes back but it cuts off half of the first section.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
      --textGradient: linear-gradient(271deg, #a0e9ff 30%, #a162e8 50%, #f093b0 70%, #edca85 94%);
      --textColor: #fff;
      --backgroundColor: #111;
  
      font-family: 'Montserrat', sans-serif;
      font-size: 18px;
      color: var(--textColor);
  }
  
  * {
      box-sizing: border-box;
  }
  
  body {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      margin: 0;
      background-color: var(--backgroundColor);
      overflow: hidden;
  }
  
  /* ::-webkit-scrollbar {
      width: 15px;
  }
  
  ::-webkit-scrollbar-thumb {
      background: #292929;
      border-radius: 1rem;
  }
  
  ::-webkit-scrollbar-thumb:hover {
      background: rgb(56, 56, 56);
  } */
  
  h1 {
      font-size: 3.25rem;
      margin: 0;
      width: 50%;
  }
  
  .gradient-text {
      background: var(--textGradient);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }
  
  p {
      color: var(--textColor);
      font-weight: 500;
      width: 50%;
  }
  
  main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow-y: scroll;
  }
  
  section {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      min-height: 100vh;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt;
      &lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;link rel="stylesheet" href="styles.css"&gt;
  
      &lt;link rel="icon" href="favicon.png" type="image/x-icon"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;main&gt;
          &lt;section class="main-header"&gt;
              &lt;h1 class="gradient-text heading" id="heading"&gt;Coming Soon!.&lt;br&gt; Coming Soon!&lt;/h1&gt;
              &lt;p class="description" id="description"&gt;More coming soon! Lorem ipsum dolor sit amet consectetur adipisicing
                  elit. Consequuntur sunt possimus illo quo dignissimos aperiam sapiente.&lt;/p&gt;
          &lt;/section&gt;
          &lt;section class="section2"&gt;
              Test
          &lt;/section&gt;
      &lt;/main&gt;
  
      &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>