scroll snap and scroll full page

Question

when I scroll my page scroll snap property works, but I clicked home or contact in the navigation bar is not working? if I removed my .container class height property or .contentContainer class height property its worked but the scroll snap property does not work. I want both of these should work for me.

const navigationLink = document.querySelectorAll(".navbarSection a");
navigationLink.forEach((element) =>
  element.addEventListener("click", navigationcontent)
);

function navigationcontent(event) {
  event.preventDefault();
  const attribute = event.currentTarget.getAttribute("href");
  const targetPosition = document.querySelector(attribute).offsetTop;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;

  const duration = 1000;
  let start = null;

  window.requestAnimationFrame(step);
  function step(timestamp) {
    if (!start) {
      start = timestamp;
    }

    const progress = timestamp - start;
    const aaa = window.scrollTo(
      0,
      distance * (progress / duration) + startPosition
    );

    if (progress < duration) window.requestAnimationFrame(step);
  }
}

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
}
.conatiner {
  background-color: aquamarine;
  width: 100%;
  height: 100vh;
}
img.logoImg {
  width: 3em;
}
.navbarSection {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  height: 8vh;
  background: lightgray;
  padding: 1%;
  font-size: 1.2rem;
  position: fixed;
  top: 1px;
  width: 100vw;
  z-index: 1;
}

ul {
  display: flex;
}

li {
  list-style-type: none;
  margin-right: 4vw;
}
li a {
  text-decoration: none;
  font-family: sans-serif;
  color: black;
  font-weight: 500;
}
.contentContainer {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.contentContainer img {
  width: 99vw;
  height: 100vh;
}
.contentContainer section {
  scroll-snap-align: start;
  height: 100vh;
  position: relative;
  overflow-x: clip;
}
p {
  color: black;
  text-align: center;
  display: flex;
  position: absolute;
  left: 50%;
  top: 3%;
  font-size: 2em;
  font-family: emoji;
  font-weight: 600;
  transform: translateY(10em);
}

<!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>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="conatiner">
        <div class="navbarSection">
            <span> <a href="#a"> <img class="logoImg" src="./src/logo.svg" alt="" srcset=""></a> </span>
            <nav>
                <div class="contentHeading">
                    <ul>
                        <li> <a href="#home">Home</a></li>
                        <li> <a href="#about">About</a></li>
                        <li> <a href="#service">Service</a></li>
                        <li> <a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <section class="contentContainer">
            <section class="box1" id="a">
                <p>Front Page</p>
  
            </section>
            <section class="box2" id="home">
                <p>Home</p>
           
            </section>
            <section class="box3" id="about">
                <p>About</p>
          
            </section>
            <section class="box4" id="service">
                <p>Service</p>
           
            </section>
            <section class="box5" id="contact">
                <p>Contact</p>
            </section>
        </section>
    </div>
    <script src="./script.js"></script>
</body>
</html>

aekit · Answer 1 · 2021-12-10T08:45:59.333

I was just playing with your code in codepen and removed the entire js I don't know how but now this works as you want ‍♂️ here and also work in the snippet.

I did some little changes like adding scroll-behavior in the *{} class so that any link you click will scroll with a smooth behaviour and remove height:100vh from .container{}

* {
  padding: 0%;
  margin: 0%;
  box-sizing: border-box;
scroll-behavior: smooth;
}
.conatiner {
  background-color: aquamarine;
  width: 100%;
}
img.logoImg {
  width: 3em;
}
.navbarSection {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  align-items: center;
  height: 8vh;
  background: lightgray;
  padding: 1%;
  font-size: 1.2rem;
  position: fixed;
  top: 1px;
  width: 100vw;
  z-index: 1;
}

ul {
  display: flex;
}

li {
  list-style-type: none;
  margin-right: 4vw;
}
li a {
  text-decoration: none;
  font-family: sans-serif;
  color: black;
  font-weight: 500;
}
.contentContainer {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.contentContainer img {
  width: 99vw;
  height: 100vh;
}
.contentContainer section {
  scroll-snap-align: start;
  height: 100vh;
  position: relative;
  overflow-x: clip;
}
p {
  color: black;
  text-align: center;
  display: flex;
  position: absolute;
  left: 50%;
  top: 3%;
  font-size: 2em;
  font-family: emoji;
  font-weight: 600;
  transform: translateY(10em);
}

<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>Document</title>
</head>

<body>
    <div class="conatiner">
        <div class="navbarSection">
            <span> <a href="#a"> <img class="logoImg" src="./src/logo.svg" alt="" srcset=""></a> </span>
            <nav>
                <div class="contentHeading">
                    <ul>
                        <li> <a href="#home">Home</a></li>
                        <li> <a href="#about">About</a></li>
                        <li> <a href="#service">Service</a></li>
                        <li> <a href="#contact">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="contentContainer">
            <section class="box1" id="a">
                <p>Front Page</p>
  
            </section>
            <section class="box2" id="home">
                <p>Home</p>
           
            </section>
            <section class="box3" id="about">
                <p>About</p>
          
            </section>
            <section class="box4" id="service">
                <p>Service</p>
           
            </section>
            <section class="box5" id="contact">
                <p>Contact</p>
            </section>
        </div>
    </div>
</body>

Run the snippet in full screen.

Ya I know if I removed the script it's working properly but compared to this script its calculate the duration value and distance value so it's more smooth compared to normal scroll-behavior: smooth; My question is why both does not work properly. — Muthukumar, Dec 10 '21 at 11:02

scroll snap and scroll full page

1 Answers1