CODEWITHSUNDEEP
htmlcss
Samuel S.
Samuel S.

Reputation: 21

Attempting to change the Color gradient on my scroll bar

I'm trying to change the color of my scroll bar so that it does not have any color in it besides beachy (no green, red, etc.). It seems that my html is not communicating the change of color gradient in my css but if I comment out my css file then it clearly destroys the scrollbar. I am wondering why I can't simply change the color in the css and it be heard by the html.

IN HTML

<!--colorful scroll bar-->
  <div id="progressBar"></div>
    <div id="ScrollPath"></div>

Script tags at bottom of HTML

<!--SCROLL BARF-->

<script type="text/javascript">
      let progress = document.getElementById('progressBar');
      let totalHeight = document.body.scrollHeight - window.innerHeight;
      window.onscroll = function() {
      let progressHeight = (window.pageYOffset / totalHeight) * 100;
      progress.style.height = progressHeight + "%";
  }
  </script>

And finally, the css


::-webkit-scrollbar
{
    width: 0;
}

#scrollPath
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
}
#progressBar
{
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    background: linear-gradient(to top, #ff7e5f, #feb47b)
        ;
    animation: animate 5s linear infinite;
}

@keyframes animate
{
    0%, 100%
    {
        filter: hue-rotate(0deg);
    }
    50%
    {
        filter: hue-rotate(360deg);
    }
}
#progressBar:before
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #ee9ca7, #ffdde1)
    ;
    filter: blur(25px);
}
#progressBar:after
{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #ff7e5f, #feb47b)
    ;
    filter: blur(55px);
}

As you can see, I've already changed the color gradients within the webframes, yet it doesn't display those colors on html in browser.

Upvotes: 1

Views: 900

Answers (1)

johannchopin
johannchopin

Reputation: 14844

Yes you change the colors of the scrollbar but you didn't see that it also have an animation that change theses colors using hue-rotate:

  ...
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0%,
  100% {
    filter: hue-rotate(0deg);
  }
  50% {
    filter: hue-rotate(360deg);
  }
}

Just remove this animation declaration and you will see your gradient:

let progress = document.getElementById('progressBar');
let totalHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function() {
  let progressHeight = (window.pageYOffset / totalHeight) * 100;
  progress.style.height = progressHeight + "%";
}
::-webkit-scrollbar {
  width: 0;
}

body {
  height: 2000px;
}

#scrollPath {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}

#progressBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  background: linear-gradient(to top, #ff7e5f, #feb47b);
}

#progressBar:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #ee9ca7, #ffdde1);
  filter: blur(25px);
}

#progressBar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #ff7e5f, #feb47b);
  filter: blur(55px);
}
<!--colorful scroll bar-->
<div id="progressBar"></div>
<div id="ScrollPath"></div>

Upvotes: 1

Related Questions