[英]Smooth Scroll CSS Property
I have the following code:我有以下代码:
.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>
Even though I have added scroll-behavior: smooth;
即使我添加了scroll-behavior: smooth;
to .containerScroll
, why does it not scroll smoothly to the next section?到.containerScroll
,为什么不能顺利滚动到下一部分? How can I make it so it scrolls smoothly to the next section?我怎样才能使它顺利滚动到下一部分? Right now, its not scrolling smoothly to the next section even though I made use of the property.现在,即使我使用了该属性,它也不能顺利滚动到下一部分。 How can I fix this?我怎样才能解决这个问题?
Please provide suggestions!请提供建议! Thanks!谢谢!
Add to root html
tag:添加到根html
标签:
html {
scroll-behavior: smooth;
}
CSS property scroll-behavior: smooth
with html tag should wrap the #about
div tag. CSS 属性scroll-behavior: smooth
with html 标签应该包裹#about
div 标签。 And need CSS property overflow-y: scroll
and height
prop also.并且还需要 CSS 属性overflow-y: scroll
和height
属性。
Idk for some reason this site's code snippet shows error, So if you want to see my explanation in code, visit below codepen. Idk 由于某种原因该站点的代码片段显示错误,因此,如果您想在代码中查看我的解释,请访问下面的 codepen。
https://codepen.io/junzero741/pen/zYEWWEK https://codepen.io/junzero741/pen/zYEWWEK
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>
ReadMe: Nowadays we are not understand what the anchor
a
tag does,even though it opens a div
in the same page自述文件:现在我们不明白标签的anchor
a
做什么的,即使它在同一页面中打开了一个div
what it actually does is reload the page and show the div.它实际上做的是重新加载页面并显示 div。 //yes this is false it may not reload the page, its only my opinion //是的,这是错误的,它可能不会重新加载页面,这只是我的意见
so in the above code we us pure js
to scroll,所以在上面的代码中我们使用纯js
来滚动,
we call this function when containerScroll
is clicked,单击containerScroll
时,我们将其称为 function,
since its js
we dont get a pointable-mouse
when we hover over those arrows,因为它的js
,当我们在这些箭头上 hover 时,我们没有得到pointable-mouse
,
so we use cursor: pointer;
所以我们使用cursor: pointer;
in css
for first-scroll
& second-scroll
.在css
中用于第一卷和second-scroll
first-scroll
This one below is another approach that I got from https://stackoverflow.com/a/70553396/14862885下面这个是我从https://stackoverflow.com/a/70553396/14862885得到的另一种方法
It preserves your animation, fixed glitches & bugs but still not recommended, unless You need to avoidjs
它保留了您的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.