0

除了使用导航链接时，平滑的捕捉滚动在各个方面都有效。顺便说一句，在 Chrome 中启用平滑滚动并没有帮助，而且它在其他浏览器中也不起作用，所以有些东西我没有得到。

如果您不想处理提供的代码，这是我的 Codepen：https ://codepen.io/Cyber​​Golem/pen/RwLGJeQ

提前谢谢了...

const section = document.querySelector(".container__section");

const sections = document.querySelectorAll(".container__section");

const clrBG = ["#dbf8c3", "#d8b0dd", "#9b9bdb", "#fff1c5", "#a9ecf8"];

const options = {
  threshold: 0.5,
  // rootMargin: "-100px",
};

const observer = new IntersectionObserver(function (entries, observer) {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      return;
    }
    console.log(entry.target);
    // observer.unobserve(entry.target);
  });
}, options);

sections.forEach((section) => {
  observer.observe(section);
});
*,
    *::before,
    *::after {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    html {
        font-size: 62.5%;
        text-decoration: none;
        scroll-behavior: smooth;
        overflow-y: scroll;
    }
    
    ::-webkit-scrollbar {
        display: none;
    }
    
    :root {
      --nav-width: 10vw;
    }
    
    body {
      color: #000;
      background-color: whitesmoke;
      font-family: "montserrat", sans-serif;
      font-weight: 400;
      width: 100vw;
      height: 100vh;
      margin: 0;
      -webkit-transition: background-color 1s ease;
      transition: background-color 1s ease;
    }
    
    .site-logo {
      font-weight: 900;
      font-size: 3rem;
      color: var(--text);
      text-decoration: none;
      border: 1px solid red;
    }
    
    header {
      --text: black;
      --text-inverse: #333;
      --background: transparent;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: var(--nav-width);
      z-index: 999;
      padding: 2em 3em;
      -webkit-transition: background 250ms ease-in;
      transition: background 250ms ease-in;
      background: var(--background);
      color: var(--text);
      border: 3px solid blue;
    }
    
    .nav-bar {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-flow: column nowrap;
              flex-flow: column nowrap;
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }
    
    .nav-bar .nav__list {
      list-style: none;
      margin: 0;
      padding: 0;
      background: lightblue;
    }
    
    .nav-bar .nav__link {
      --spacing: 1em;
      margin-top: 10px;
      text-decoration: none;
      color: inherit;
      display: inline-block;
      padding: calc(var(--spacing) / 2) var(--spacing);
      position: relative;
      letter-spacing: 2px;
      font-size: 0.9rem;
    }
    
    .nav-bar .nav__link:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: var(--spacing);
      right: var(--spacing);
      height: 2px;
      background: currentColor;
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
      -webkit-transition: -webkit-transform 150ms ease-in-out;
      transition: -webkit-transform 150ms ease-in-out;
      transition: transform 150ms ease-in-out;
      transition: transform 150ms ease-in-out, -webkit-transform 150ms ease-in-out;
    }
    
    .nav-bar .nav__link:hover::after {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
    }
    
    .nav-bar .nav__link--btn {
      border: 1.5px solid currentColor;
      border-radius: 2em;
      margin-left: 1em;
      -webkit-transition: background 250ms ease-in-out;
      transition: background 250ms ease-in-out;
      letter-spacing: 1px;
      padding: 0.75em 1.5em;
    }
    
    .nav-bar .nav__link--btn:hover {
      background: var(--text);
      color: var(--text-inverse);
      border-color: var(--text);
    }
    
    .nav-bar .nav__link--btn::after {
      display: none;
    }
    
    .nav-bar .nav__link--btn--highlight {
      background: limegreen;
      border-color: limegreen;
      color: #333;
    }
    
    .nav-bar .nav__link--btn--highlight:hover {
      background: var(--text);
      border-color: var(--text);
    }
    
    .nav-scrolled {
      --text: #333;
      --text-inverse: #f4f4f4;
      --background: #f4f4f4;
      -webkit-box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
              box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    }
    
    .container {
      width: 100%;
      height: 100%;
      -ms-scroll-snap-type: y mandatory;
          scroll-snap-type: y mandatory;
      overflow-y: scroll;
    }
    
    .container__section {
      height: 100vh;
      width: 100vw;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      scroll-snap-align: start;
      font-family: "Rubik", sans-serif;
    }
    
    .container #sec0 {
      color: slategrey;
    }
    
    .container #sec1 {
      color: red;
    }
    
    .container #sec2 {
      color: blue;
    }
    
    .container #sec3 {
      color: green;
    }
    
    .container h2 {
      font-size: 23rem;
    }
    /*# sourceMappingURL=main.css.map */
<body>
  <header>
    <div class="nav-bar">
      <a href="#sec0"
         class="site-logo"
         aria-label="homepage">HOME</a>
      <nav>
        <ul class="nav__list">
          <li class="nav__list--item">
            <a href="#sec1"
               class="nav__link">SEC 1</a>
          </li>
          <li class="nav__list--item">
            <a href="#sec2"
               class="nav__link">SEC 2</a>
          </li>
          <li class="nav__list--item">
            <a href="#sec3"
               class="nav__link">SEC 3</a>
          </li>
        </ul>
    </div>
    </nav>
  </header>

  <main class="container">
    <section class="container__section"
             id="sec0">
      <h2>HOME</h2>
    </section>
    <section class="container__section"
             id="sec1">
      <h2>ONE</h2>
    </section>
    <section class="container__section"
             id="sec2">
      <h2>TWO</h2>
    </section>
    <section class="container__section"
             id="sec3">
      <h2>THREE</h2>
    </section>
  </main>  
</body>

4

0 回答 0