Пользовательские пункты меню не кликабельны

Question

Мне нужно, чтобы пункты меню выглядели как сейчас (как в 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;
}
 

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="larger">
        <div class="select">
          <a href="#">Action Lorem </a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
          <a href="#">Action Lorem</a>
          <a href="#">Test Text</a>
        </div>
        <i id="slideBack" class="slideBack fas fa-chevron-up"></i>
        <i id="slide" class="slide fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>

Answer 1

1. Чтобы градиент позволял взаимодействовать с нижележащими элементами, вы можете использовать pointer-events: none

2. Ваш градиент находится в абсолютном положении с top: 0, так что он идет вместесо свитком. Чтобы это исправить, вы можете установить положение градиента на fixed (но тогда он будет растянут до размеров вьюпорта). Лучше было бы обернуть список опций другим контейнером, чтобы свиток не влиял на положение градиента. Примерно так:

<div class="select-wrap">
  <div class="select">
    ...
  </div>
</div>

.larger .select-wrap {
  width: 240px;
  height: 270px;
}

.larger .select-wrap .select {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative;
}

.larger .select-wrap::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#80acdc, transparent, #80acdc);
  pointer-events: none; /* this allows for the mouse clicks go through */
}

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-wrap {
  width: 240px;
  height: 270px;
}

.larger .select-wrap .select {
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: hidden;
  -ms-overflow-style: scroll;
  scrollbar-width: none;
  position: relative;
}

.larger .select-wrap::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(#80acdc, transparent, #80acdc);
  pointer-events: none;
}

.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;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-3">
      <div class="larger">
        <div class="select-wrap">
          <div class="select">
            <a href="#">Action Lorem </a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
            <a href="#">Action Lorem</a>
            <a href="#">Test Text</a>
          </div>
        </div>
        <i id="slideBack" class="slideBack fas fa-chevron-up"></i>
        <i id="slide" class="slide fas fa-chevron-down"></i>
      </div>
    </div>
  </div>
</div>