平滑滚动 CSS 属性

Question

我有以下代码：

 .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>

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

请提供建议！ 谢谢！

Answer 1

添加到根html标签：

html {
  scroll-behavior: smooth;
}

Answer 2

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

Idk 由于某种原因该站点的代码片段显示错误，因此，如果您想在代码中查看我的解释，请访问下面的 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时，我们将其称为 function，
因为它的js ，当我们在这些箭头上 hover 时，我们没有得到pointable-mouse ，
所以我们使用cursor: pointer; 在css中用于第一卷和second-scroll first-scroll

---

下面这个是我从https://stackoverflow.com/a/70553396/14862885得到的另一种方法
它保留了您的 animation，修复了故障和错误，但仍然不推荐，除非您需要避免使用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>