如何在可滚动div的顶部和底部获得渐变阴影，或者隐藏在各自的末端

.scrollable-div {
  height: 300px; /* 设置div的高度 */
  overflow: auto; /* 设置内容超出时显示滚动条 */
}

.scrollable-div::before,
.scrollable-div::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 20px; /* 设置阴影高度 */
  pointer-events: none; /* 防止阴影遮挡内容的交互 */
}

.scrollable-div::before {
  top: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

.scrollable-div::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

var scrollableDiv = document.querySelector('.scrollable-div');

scrollableDiv.addEventListener('scroll', function() {
  var scrollTop = scrollableDiv.scrollTop;
  var scrollHeight = scrollableDiv.scrollHeight;
  var clientHeight = scrollableDiv.clientHeight;

  if (scrollTop === 0) {
    scrollableDiv.classList.remove('show-top-shadow');
  } else {
    scrollableDiv.classList.add('show-top-shadow');
  }

  if (scrollTop + clientHeight === scrollHeight) {
    scrollableDiv.classList.remove('show-bottom-shadow');
  } else {
    scrollableDiv.classList.add('show-bottom-shadow');
  }
});

.scrollable-div.show-top-shadow::before {
  display: none;
}

.scrollable-div.show-bottom-shadow::after {
  display: none;
}