平滑滚动到锚点的问题

Question

I am currently developing a site but I am encountering a problem.我目前正在开发一个网站，但我遇到了问题。
There are several div (item).有几个div（项目）。 When I scroll a little bit, the page focuses directly on the whole div (with a height of 100vh).当我滚动一点时，页面直接聚焦在整个 div 上（高度为 100vh）。 This works perfectly.这完美地工作。 On the other hand, I tried several methods (js, css, jquery) to do a smooth scroll when you click on a button that points to an anchor, but it doesn't work.另一方面，当您单击指向锚点的按钮时，我尝试了几种方法（js、css、jquery）进行平滑滚动，但它不起作用。 After several hours of research I found that the two lines overflow: scroll;经过几个小时的研究，我发现这两行overflow: scroll; and scroll-behavior: smooth;和scroll-behavior: smooth; are not compatible with each other.彼此不兼容。 When I delete the first one, the automatic focus on the full height of the div no longer works but the smooth scroll of the buttons works correctly, and vice versa.当我删除第一个时，对 div 整个高度的自动聚焦不再起作用，但按钮的平滑滚动正常工作，反之亦然。
Do you know how to "merge" these two effects?你知道如何“合并”这两种效果吗？
(I hope you understood my problem, if you have any questions ask me^^) （希望你能理解我的问题，如果有什么问题可以问我^^）

<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

Can you please check the below code?你能检查下面的代码吗？ Hope it will work for you.希望它对你有用。 You have to remove scroll-behavior from the HTML and give overflow and scroll-behavior to the container .您必须从HTML中删除scroll-behavior ，并为container提供溢出和滚动行为。

Please refer to this link: https://jsfiddle.net/yudizsolutions/wk3scpyr/2/请参考此链接： 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