平滑滚动到锚点的问题答案

【问题标题】：Problems with smooth scrolling to an anchor平滑滚动到锚点的问题
【发布时间】：2023-04-02 14:09:01
【问题描述】：

我目前正在开发一个网站，但遇到了问题。
有几个div（项目）。当我滚动一点时，页面直接聚焦在整个 div 上（高度为 100vh）。这完美地工作。另一方面，当您单击指向锚点的按钮时，我尝试了几种方法（js、css、jquery）进行平滑滚动，但它不起作用。经过几个小时的研究，我发现 overflow: scroll; 和scroll-behavior: smooth; 这两条线彼此不兼容。当我删除第一个时，对 div 整个高度的自动聚焦不再起作用，但按钮的平滑滚动正常工作，反之亦然。
你知道如何“合并”这两种效果吗？
（希望你能理解我的问题，有什么问题可以问我^^）

<body>
<div class="container">
  <div class="item" id="accueil">
    <nav> 
      <div class="logo" data-aos="fade-up">
        <img src="elements/illustrations/head.svg" height="100px" width="100px" alt="">
      </div>
      <ul class="nav-links" data-aos="fade-up">
        <li><a class="smoothScroll current" href="#accueil">Accueil</a></li>
        <li><a class="smoothScroll" href="#covid19">Covid-19</a></li>
        <li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li>
        <li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li>
        <li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li>
      </ul>
    </nav>

    <div class="header">
      <section class="left">
        <div data-aos="fade-up" class="heading">
          <h1>Bonjour &#x1F44B; <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1>
          <div class="typewriter">
            <h1>ravi de vous rencontrer</h1>
          </div>
        </div>
        <a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a>
      </section>

      <section class="right" data-aos="fade-left">
        <div class="illustration">
          <img src="elements/illustrations/illustration.svg" alt="">
        </div>
      </section>
    </div>

    

  </div>
  <div class="item" id="covid19">Covid-19</div>
  <div class="item" id="cyberharcelement">Cyberharcèlement</div>
  <div class="item" id="anticovid">Anti-Covid</div>
  <div class="item" id="galerie">Galerie Saint Germain</div>
</div>

html {
  scroll-behavior: smooth !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--inter);
}

.container {
  max-height: 100vh;
  overflow: scroll;
  scroll-snap-type: y mandatory;
}

.item {
  color:black;
  /* background: #f5f5f5; */
  height: 100vh;
  scroll-snap-align: start;
}

【问题讨论】：

为什么不直接使用 scrollIntoView 呢？ developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

标签： javascript html css scroll

【解决方案1】：

你能检查下面的代码吗？希望它对你有用。您必须从 HTML 中删除 scroll-behavior 并将 overflow 和 scroll-behavior 提供给 container。

请参考此链接：https://jsfiddle.net/yudizsolutions/wk3scpyr/2/

body {
  font-family: var(--inter);
}

.container {
  max-height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.item {
  color: black;
  /* background: #f5f5f5; */
  height: 100vh;
  scroll-snap-align: start;
}

<body>
  <div class="container">
    <div class="item" id="accueil">
      <nav>
        <div class="logo" data-aos="fade-up">
          <img src="elements/illustrations/head.svg" height="100px" width="100px" alt="">
        </div>
        <ul class="nav-links" data-aos="fade-up">
          <li><a class="smoothScroll current" href="#accueil">Accueil</a></li>
          <li><a class="smoothScroll" href="#covid19">Covid-19</a></li>
          <li><a class="smoothScroll" href="#cyberharcelement">Cyberharcèlement</a></li>
          <li><a class="smoothScroll" href="#anticovid">Anti-Covid</a></li>
          <li><a class="smoothScroll" href="#galerie">Galerie Saint Germain</a></li>
        </ul>
      </nav>

      <div class="header">
        <section class="left">
          <div data-aos="fade-up" class="heading">
            <h1>Bonjour &#x1F44B; <br> je m'appelle <span id='jules'>Jules</span>, <br> </h1>
            <div class="typewriter">
              <h1>ravi de vous rencontrer</h1>
            </div>
          </div>
          <a class="button" class="smoothScroll" data-aos="zoom-in-right" href="#covid19">Découvrir</a>
        </section>

        <section class="right" data-aos="fade-left">
          <div class="illustration">
            <img src="elements/illustrations/illustration.svg" alt="">
          </div>
        </section>
      </div>



    </div>
    <div class="item" id="covid19">Covid-19</div>
    <div class="item" id="cyberharcelement">Cyberharcèlement</div>
    <div class="item" id="anticovid">Anti-Covid</div>
    <div class="item" id="galerie">Galerie Saint Germain</div>
  </div>

【讨论】：