Why is the scroll-snap not working in CSS?-CodePudding

I have no idea why the scroll-snap-type CSS property isn't working as expected.

I just want the page to scroll down to each div smoothly and it doesn't want to work.

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (scroll) {
        scroll.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

* {
    box-sizing: border-box;
    margin: 0px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    margin-top: 1vh;
    color: rgb(230,230,230);
}

a {
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
    color: rgb(230,230,230);
}

::-webkit-scrollbar {
    width: 10px;
  }
  
::-webkit-scrollbar-track {
    background: rgb(24, 24, 24);
}

::-webkit-scrollbar-thumb {
    background: rgb(170, 164, 164);
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(56, 56, 56);
}

.navbar {
    height: 6.7vh;
    width: 100vw;
    padding: 0px 2vw;
    position: fixed;
    top: 0;
    background-color: rgb(32, 32, 32);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbarLinks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 30vw;
}

.mainContent {
    height: 500vh;
    width: 100%;
    padding: 0px 2vw;
    background-color: rgb(24, 24, 24);
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
}


.sactionDiv {
    padding-top: 6.7vh;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Project</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=Roboto:wght@500&display=swap" rel="stylesheet">
        <link href="" rel="icon" type="image/x-icon" >
        <link href="indexStyle.css" rel="stylesheet" >
        <script src="indexJS.js" defer ></script>
    </head>
    <body>
        <div id="navbar" >
            <div id="navbarLogo"  >

            </div>
            <div id="navbarLinks"  >
                <a href="#firstDiv">First Div</a>
                <a href="#secondDiv">Second Div</a>
                <a href="#thirdDiv">Third Div</a>
                <a href="#fourthDiv">Fourth Div</a>
                <a href="#fifthDiv">Fifth Div</a>
            </div>
        </div>
        <div id="mainContent" >
            <div id="firstDiv" >
                <div id="firstDivTitle" >
                    <h1>First Div</h1>
                </div>
            </div>
            <div id="secondDiv" >
                <div id="secondDivTitle" >
                    <h1>Second Div</h1>
                </div>
             </div>
             <div id="thirdDiv" >
                <div id="thirdDivTitle" >
                    <h1>Third Div</h1>
                </div>
             </div>
             <div id="fourthDiv" >
                <div id="fourthDivTitle" >
                    <h1>Fourth Div</h1>
                </div>
             </div>
             <div id="fifthDiv" >
                <div id="fifthDivTitle" >
                    <h1>Fifth Div</h1>
                </div>
             </div>
        </div>
    </body>
</html>

CodePudding user response：

OK, I see, sorry, made a mistake there, what you were looking for was the snapping between divs. The reason your code isn't working is because you are using the body/html's scroll bar. You should be using the .mainContent's scrollbar instead. So the following code will hide the scroll bar of body/html and add the scroll bar to the .mainContent element by setting it's height to 100vh.

See modified CSS code below:

* {
    box-sizing: border-box;
    margin: 0px;
}

h1 {
    font-family: 'Roboto', sans-serif;
    margin-top: 1vh;
    color: rgb(230,230,230);
}

a {
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
    color: rgb(230,230,230);
}

::-webkit-scrollbar {
    width: 10px;
  }
  
::-webkit-scrollbar-track {
    background: rgb(24, 24, 24);
}

::-webkit-scrollbar-thumb {
    background: rgb(170, 164, 164);
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    -ms-border-radius: 60px;
    -o-border-radius: 60px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(56, 56, 56);
}

html, body {
  overflow: hidden;
}

.navbar {
    height: 6.7vh;
    width: 100vw;
    padding: 0px 2vw;
    position: fixed;
    top: 0;
    background-color: rgb(32, 32, 32);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbarLinks {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 30vw;
}

.mainContent {
    height: 100vh;
    width: 100%;
    padding: 0px 2vw;
    background-color: rgb(24, 24, 24);
    scroll-snap-type: y mandatory;
    overflow: scroll;
}


.sactionDiv {
    padding-top: 6.7vh;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    scroll-snap-align: center;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Project</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=Roboto:wght@500&display=swap" rel="stylesheet">
        <link href="" rel="icon" type="image/x-icon" >
        <link href="indexStyle.css" rel="stylesheet" >
        <script src="indexJS.js" defer ></script>
    </head>
    <body>
        <div id="navbar" >
            <div id="navbarLogo"  >

            </div>
            <div id="navbarLinks"  >
                <a href="#firstDiv">First Div</a>
                <a href="#secondDiv">Second Div</a>
                <a href="#thirdDiv">Third Div</a>
                <a href="#fourthDiv">Fourth Div</a>
                <a href="#fifthDiv">Fifth Div</a>
            </div>
        </div>
        <div id="mainContent" >
            <div id="firstDiv" >
                <div id="firstDivTitle" >
                    <h1>First Div</h1>
                </div>
            </div>
            <div id="secondDiv" >
                <div id="secondDivTitle" >
                    <h1>Second Div</h1>
                </div>
             </div>
             <div id="thirdDiv" >
                <div id="thirdDivTitle" >
                    <h1>Third Div</h1>
                </div>
             </div>
             <div id="fourthDiv" >
                <div id="fourthDivTitle" >
                    <h1>Fourth Div</h1>
                </div>
             </div>
             <div id="fifthDiv" >
                <div id="fifthDivTitle" >
                    <h1>Fifth Div</h1>
                </div>
             </div>
        </div>