平滑滚动到锚点的问题

Question

我目前正在开发一个网站，但我遇到了问题。
有几个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;
}

Answer 1

你能检查下面的代码吗？ 希望它对你有用。 您必须从HTML中删除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>

平滑滚动到锚点的问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-02-10 05:43:10

平滑滚动到锚点的问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-02-10 05:43:10

解决方案1
1 已采纳 2021-02-10 05:43:10