平滑滚动 CSS 属性

Question

我有以下代码。即使我在.containerScroll 中添加了scroll-behavior: smooth;，为什么它不能顺利滚动到下一部分？我怎样才能使它顺利滚动到下一部分？现在，即使我使用了该属性，它也不能顺利滚动到下一部分。我该如何解决这个问题？

.containerScroll {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
  scroll-behavior: smooth;
}

.first-scroll {
  left: calc(50% - -2em) !important;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.18em 0.18em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  left: calc(50% - -2em) !important;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.18em 0.18em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.4;
  }
}

@media (min-width:320px) and (max-width:480px) {
  .containerScroll {
    display: none;
  }
}




.long-container {
  height: 600px;
  background: yellow;
}

#about {
  height: 600px;
  background: green;
}

<a href="#about">
  <div class="containerScroll">
    <div class="first-scroll"></div>
    <div class="second-scroll"></div>
  </div>
</a>


<div id="" class="long-container">
  long old container
</div>

<div id="about">
  scroll to me
</div>

Answer 1

添加到根html标签：

html {
  scroll-behavior: smooth;
}

平滑滚动行为应该添加到正在滚动的元素，而不是触发滚动的元素。

Answer 2

带有 html 标签的 CSS 属性 scroll-behavior: smooth 应该包裹 #about div 标签。并且还需要 CSS 属性 overflow-y: scroll 和 height 属性。

idk 由于某种原因本站的代码 sn-p 显示错误，所以如果你想在代码中看到我的解释，请访问下面的 codepen。

https://codepen.io/junzero741/pen/zYEWWEK

Answer 3

function scrollf() {//js function
        let e = document.getElementById("about");//Your id to scroll
        e.scrollIntoView({
          block: 'start',
          behavior: 'smooth',
          inline: 'start'
        });
      }

.containerScroll {
  /*--bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
  scroll-behavior: smooth; //removed these unwanted lines,u may un comment*/
}

.first-scroll {
  left: calc(50% - -2em) !important;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.18em 0.18em 0;
  border-style: solid;
  border-color: black;
  position: absolute;
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
  cursor: pointer; /*added this for cursor click-like effect*/
}

.second-scroll {
  left: calc(50% - -2em) !important;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.18em 0.18em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
  cursor: pointer; /*added this for cursor click-like effect*/
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.4;
  }
}

@media (min-width:320px) and (max-width:480px) {
  .containerScroll {
    display: none;
  }
}




.long-container {
  height: 600px;
  background: yellow;
}

#about {
  height: 600px;
  background: green;
}

<div class="containerScroll" onclick="scrollf()"><!--use div with js-->
    <div class="first-scroll"></div>
    <div class="second-scroll"></div>
  </div>



<div id="" class="long-container">
  long old container
</div>

<div id="about">
  scroll to me
</div>

自述文件：现在我们不明白anchor a 标签的作用，即使它在同一页面中打开了一个div

它实际上所做的是重新加载页面并显示 div。//是的，这是错误的，它可能不会重新加载页面，这只是我的意见

所以在上面的代码中我们使用纯js 来滚动，
我们在点击containerScroll 时调用此函数，
因为它是js，所以当我们将鼠标悬停在这些箭头上时，我们不会得到pointable-mouse，
所以我们在css 中使用cursor: pointer; 来表示first-scroll&second-scroll。

---

下面这个是我从https://stackoverflow.com/a/70553396/14862885得到的另一种方法
它保留了您的动画，修复了小故障和错误，但仍然不推荐，除非您需要避免 js

.containerScroll {
  --bs-gutter-x: 1.5rem;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) / 2);
  padding-left: calc(var(--bs-gutter-x) / 2);
  margin-right: auto;
  margin-left: auto;
  scroll-behavior: smooth;
  
}


.first-scroll {
  left: calc(50% - -2em) !important;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  border-width: 0 0.18em 0.18em 0;
  border-style: solid;
  border-color: black;
  position: sticky; /*makes scroll arrow to stick to container*/
  animation: scrolldown1 1.2s ease-in-out infinite 0.15s;
}

.second-scroll {
  left: calc(50% - -2em) !important;
  width: 1.5em;
  height: 1.5em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: sticky;/*makes scroll arrow to stick to container*/
  border-width: 0 0.18em 0.18em 0;
  border-style: solid;
  border-color: black;
  animation: scrolldown1 1.2s ease-in-out infinite;
}

@keyframes scrolldown1 {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.4;
  }
  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.4;
  }
}

@media (min-width:320px) and (max-width:480px) {
  .containerScroll {
    display: none;
  }
}




.long-container {
  height: 600px;
  background: yellow;
 
}

#about {
  height: 600px;
  background: green;
}

.smooth-container {
   width: 100%;
  height: 600px;
  overflow: scroll;
  scroll-behavior: smooth;
  padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
  box-sizing: content-box;
}
.parent {
   width: 100%;
  height: 600px;
  overflow: hidden;
}

<!-- div tag with class `smooth-container` is wrapping the `long-container` and `about`. and with CSS, `overflow-y: scroll` and `height` value. -->
<div class="parent">
<div class="smooth-container">
<div id="" class="long-container">
  long old container
  
  <a href="#about"><!-- added anchor tag inside long-container-->
  <div class="containerScroll">
    <div class="first-scroll"></div>
    <div class="second-scroll"></div>
  </div>
</a>
  
</div>

<div id="about">
  scroll to me
</div>
 </div>
  </div>