平滑滾動CSS屬性-有解無憂

我有以下代碼。即使我已經添加scroll-behavior: smooth;到.containerScroll，為什么它不能順利滾動到下一部分？我怎樣才能使它順利滾動到下一部分？現在，即使我使用了該屬性，它也無法順利滾動到下一部分。我怎樣才能解決這個問題？

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

uj5u.com熱心網友回復：

添加到根html標簽：

html {
  scroll-behavior: smooth;
}

平滑滾動行為應該添加到正在滾動的元素上，而不是添加到觸發滾動的元素上。

uj5u.com熱心網友回復：

scroll-behavior: smooth帶有 html 標簽的CSS 屬性應該包裹#aboutdiv 標簽。并且還需要 CSS 屬性overflow-y: scroll和height道具。

由于某種原因，這個站點的代碼片段顯示錯誤，所以如果你想在代碼中看到我的解釋，請訪問下面的 codepen。

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

uj5u.com熱心網友回復：

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，
所以我們使用cursor: pointer;in cssfor 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401215.html

標籤：javascript html 查询 css

上一篇：如何將HTML音頻元素縮小到表格單元格中？

下一篇：需要在我的網頁上并排對齊的搜索框