Smooth Scroll CSS Property-CodePudding

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 >
    <div ></div>
    <div ></div>
  </div>
</a>


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

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

Even though I have added scroll-behavior: smooth; to .containerScroll, why does it not scroll smoothly to the next section? 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!

CodePudding user response：

Add to root html tag:

html {
  scroll-behavior: smooth;
}

The smooth scroll behavior should be added to the element that is being scrolled, not to the element that triggers the scroll.

CodePudding user response：

CSS property scroll-behavior: smooth with html tag should wrap the #about div tag. And need CSS property overflow-y: scroll and height prop also.

Idk for some reason this site's code snippet shows error, So if you want to see my explanation in code, visit below codepen.

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

CodePudding user response：

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  onclick="scrollf()"><!--use div with js-->
    <div ></div>
    <div ></div>
  </div>



<div id="" >
  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

what it actually does is reload the page and show the 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 ,
we call this function when containerScroll is clicked,
since its js we dont get a pointable-mouse when we hover over those arrows,
so we use cursor: pointer; in css for first-scroll&second-scroll.

This one below is another approach that I got from https://stackoverflow.com/a/70553396/14862885
It preserves your animation, fixed glitches & bugs but still not recommended, unless You need to avoid 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 >
<div >
<div id="" >
  long old container
  
  <a href="#about"><!-- added anchor tag inside long-container-->
  <div >
    <div ></div>
    <div ></div>
  </div>
</a>
  
</div>

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