我需要菜單項看起來像現在一樣（就像在 iOS 中一樣），但到目前為止我有兩個大問題。首先，當我嘗試單擊其中一個鏈接時，由于我的線性漸變，這是不可能的。其次，當我單擊向下箭頭瀏覽其他菜單項時，所有漸變都不起作用。我怎樣才能讓它正常工作？我也做了一個codepen此 document.querySelectorAll('.slide').forEach(function (next) {   next.addEventListener('click', function () {     var container = this.parentElement.querySelector('.select');     sideScroll(container, 'bottom', 20, 25, 15);   }); });document.querySelectorAll('.slideBack').forEach(function (back) {  back.addEventListener('click', function () {    var container = this.parentElement.querySelector('.select');    sideScroll(container, 'top', 20, 25, 15);  });});function sideScroll(element, direction, speed, distance, step) {  scrollAmount = 0;  var slideTimer = setInterval(function () {    if (direction == 'top') {      element.scrollTop -= step;    } else {      element.scrollTop += step;    }    scrollAmount += step;    if (scrollAmount >= distance) {      window.clearInterval(slideTimer);    }  }, speed);}* {  background: #80acdc;}.larger {   height: 100vh;   display: flex;   justify-content: center;   align-items: center;} .larger .select {   width: 240px;   height: 270px;   display: flex;   flex-direction: column;   text-align: center;   overflow-y: hidden;   -ms-overflow-style: scroll;   scrollbar-width: none;   position: relative;} .larger .select::after {   content: '';   position: absolute;   display: block;   width: 100%;   height: 100%;   top: 0;   left: 0;   background-image: linear-gradient(#80acdc, transparent, #80acdc);} .larger .select a {   color: white;   margin: 3.5px 0;} .larger .select a:first-child {   margin-top: 0;} .larger #slide {   position: absolute;   left: 47%;   bottom: 38px;   color: #fff;   font-size: 15px;   cursor: pointer;} .larger #slideBack {   position: absolute;   top: 38px;   left: 47%;   color: #fff;   font-size: 15px;   cursor: pointer;}