Scrollbar Gradient Transition from scroll to bottom-CodePudding

I am trying to make my scrollbar change color,gradient like, when scrolling. Now it is fixed to a gradient color no matter if it is on top or bottom of the page. Can this happen? Chnge color on scroll?

EDIT:

/* width */
::-webkit-scrollbar {
  width: 19px;
}

/* Track */
::-webkit-scrollbar-track {
  background: rgba(0,0,0,1);
    border-color:black;
    border-radius:20px;
}

/* Handle */
::-webkit-scrollbar-thumb {

  background-image: linear-gradient(to bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  animation: scroll-gradient 5s ease infinite;
  background-size: 100% 100%;
    border-radius:20px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #7333B1;
}

body {
height:100vw;
}

<body>
<h1 style="height:200px">hello</h1>
</body>

As you can see the bar is static gradient. Is there any way to make the scrolbarr gradient change when scrolling?

CodePudding user response：

I've edited your code a bit, I hope it's what you were looking for.

/* width */
body::-webkit-scrollbar {
  width: 19px;
}

/* Added here the linear gradient. From 0% to 100%. Use rgba for better results */
body::-webkit-scrollbar-track {
  background: linear-gradient(0deg, #ee7752, #e73c7e 0%, #23a6d5, #23d5ab 100%);
  border-color: black;
  border-radius: 20px;
}

/* Added background: transparent */
body::-webkit-scrollbar-thumb {
  background: transparent;
  animation: scroll-gradient 5s ease infinite;
  background-size: 100% 100%;
  border-radius: 20px;
  /* box shadow. If we set it to an enormous value with zero blur, it will cover all space around the scrollbar handle */
  box-shadow: 0px 0px 0px 100000vh black;
}

/* You need this? I think no. */
/*::-webkit-scrollbar-thumb:hover {
  background: #7333B1;
}*/

/*Changed size to view the changes*/
body {
  height: 150vw;
}

<body>
<h1 style="height:200px">hello</h1>
</body>