问是否有办法使按钮在向下滚动时褪色？

EN

let opacityPercentage = 100;

document.addEventListener('DOMContentLoaded', () => {
  const arrowElement = document.getElementById('arrow');
  
  window.onscroll = () => {
    opacityPercentage = Math.max(100 - window.pageYOffset, 0);
    arrowElement.style.opacity = opacityPercentage / 100;
  }
});

@keyframes bouncing {
    0% {bottom: 0;}
    50% {bottom: 10px;}
    100% {bottom: 0;}
}

.arrow {
    animation: bouncing 1s infinite ease-in-out;
    bottom: 0;
    display: block;
    height: 50px;
    left: 50%;
    position: absolute;
    width: 50px;
}

<div style="height: 200vh;"> 
  <div>
      <img class="arrow" id="arrow" src="https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png"/>
  </div>
</div>

var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
  console.log("scrolled");
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos >= currentScrollPos) {
    console.log(prevScrollpos, currentScrollPos);
    document.getElementById("arrow").style.display = "block";
  } else {
    console.log(prevScrollpos, currentScrollPos);
    document.getElementById("arrow").style.display = "none";
  }
};