Overflow-y: scroll creates a disabled scrollbar-CodePudding

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.

: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;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="styles.css">

    <link rel="icon" href="favicon.png" type="image/x-icon">
</head>

<body>
    <main>
        <section >
            <h1  id="heading">Coming Soon!.<br> Coming Soon!</h1>
            <p  id="description">More coming soon! Lorem ipsum dolor sit amet consectetur adipisicing
                elit. Consequuntur sunt possimus illo quo dignissimos aperiam sapiente.</p>
        </section>
        <section >
            Test
        </section>
    </main>

    <script src="script.js"></script>
</body>

</html>

CodePudding user response：

In the CSS for the .main {} section where you have height set to height:100%; change this to height:100vh;

Setting height to 100% goes beyond the browser height but the scroll bar doesn't appear because you told it to not show the scroll bar in the body. Setting the height to 100vh for .main {} ensure that the height is 100% of the view port height causing .main {} overflow-y to take effect.