[英]Smooth Scroll CSS Property
我有以下代碼:
.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
,為什么不能順利滾動到下一部分? 我怎樣才能使它順利滾動到下一部分? 現在,即使我使用了該屬性,它也不能順利滾動到下一部分。 我怎樣才能解決這個問題?
請提供建議! 謝謝!
添加到根html
標簽:
html {
scroll-behavior: smooth;
}
CSS 屬性scroll-behavior: smooth
with html 標簽應該包裹#about
div 標簽。 並且還需要 CSS 屬性overflow-y: scroll
和height
屬性。
Idk 由於某種原因該站點的代碼片段顯示錯誤,因此,如果您想在代碼中查看我的解釋,請訪問下面的 codepen。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.