Thiết kế website giá rẻ

Question

Here you can see these color sections do not show fully when the user scrolls, sometimes stopping midway between sections. I want the page to scroll by full sections, activating the corresponding tab. Please see the video and code for reference. Can you help?
The demo

/* styles.css */

body,
html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.empty-section {
  height: 100vh;
}

.main-content {
  display: flex;
  flex: 1;
}

.tabs {
  position: sticky;
  top: 10vh; /* Adjust based on the height of the empty section */
  width: 200px;
  background: #333;
  height: 80vh; /* Adjust based on the height of the empty sections */
  overflow-y: auto;
}

.tabs ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tabs ul li {
  margin: 0;
}

.tabs ul li a {
  color: #fff;
  text-decoration: none;
  padding: 15px;
  display: block;
}

.tabs ul li a:hover,
.tabs ul li a.active {
  background: #444;
}

.sections {
  flex: 1;
  overflow-y: auto;
}

.section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  transition: background 0.3s;
}

#section1 {
  background: #ffadad;
}
#section2 {
  background: #ffd6a5;
}
#section3 {
  background: #fdffb6;
}
#section4 {
  background: #caffbf;
}

document.addEventListener("DOMContentLoaded", () => {
  console.log("t");
  const links = document.querySelectorAll(".tabs ul li a");
  const sections = document.querySelectorAll(".section");

  // Add smooth scroll behavior
  links.forEach((link) => {
    link.addEventListener("click", (event) => {
      event.preventDefault();
      const targetId = link.getAttribute("href").substring(1);
      const targetSection = document.getElementById(targetId);

      targetSection.scrollIntoView({
        behavior: "smooth",
        block: "start",
      });

      setActiveSection(targetId);
    });
  });

  // Highlight active section and hide inactive sections
  function setActiveSection(activeSectionId = null) {
    sections.forEach((section) => {
      const sectionId = section.getAttribute("id");
      if (activeSectionId) {
        section.classList.toggle("active", sectionId === activeSectionId);
      } else {
        const rect = section.getBoundingClientRect();
        if (
          rect.top <= window.innerHeight / 2 &&
          rect.bottom >= window.innerHeight / 2
        ) {
          activeSectionId = sectionId;
          section.classList.add("active");
        } else {
          section.classList.remove("active");
        }
      }
    });

    links.forEach((link) => {
      const href = link.getAttribute("href").substring(1);
      link.classList.toggle("active", href === activeSectionId);
    });
  }

  // Call the function initially and on scroll
  document.documentElement.style.scrollBehavior = "auto";

  setActiveSection();
  window.addEventListener("scroll", () => setActiveSection());
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sticky Scrolling Tab Effect</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="empty-section">Empty Section</div>

    <div class="container">
      <div class="main-content">
        <div class="tabs">
          <ul>
            <li><a href="#section1">Section 1</a></li>
            <li><a href="#section2">Section 2</a></li>
            <li><a href="#section3">Section 3</a></li>
            <li><a href="#section4">Section 4</a></li>
          </ul>
        </div>
        <div class="sections scroll-container">
          <div id="section1" class="section">Section 1</div>
          <div id="section2" class="section">Section 2</div>
          <div id="section3" class="section">Section 3</div>
          <div id="section4" class="section">Section 4</div>
        </div>
      </div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
      <div class="empty-section">Empty Section</div>
    </div>

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

I want the page to scroll by full sections, activating the corresponding tab.

Thiết kế website giá rẻ

Danh mục

How to make the page scroll to the next section fully on user scroll?