CSS / JS :使滚动上的垂直线具有动画效果

<div class="scroll-container">
  <!-- 内容 -->
</div>

.scroll-container {
  height: 300px; /* 设置容器高度 */
  width: 100%; /* 设置容器宽度 */
  overflow-y: scroll; /* 设置垂直滚动条 */
  scrollbar-width: thin; /* 设置滚动条宽度 */
  scrollbar-color: #888888 #dddddd; /* 设置滚动条颜色 */
}

.scroll-container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 2px; /* 设置垂直线宽度 */
  background-color: #ff0000; /* 设置垂直线颜色 */
  animation: scrollAnimation 2s infinite; /* 设置动画效果 */
}

@keyframes scrollAnimation {
  0% {
    opacity: 0; /* 初始状态透明度为0 */
  }
  50% {
    opacity: 1; /* 中间状态透明度为1 */
  }
  100% {
    opacity: 0; /* 结束状态透明度为0 */
  }
}

var container = document.querySelector('.scroll-container');
var verticalLine = document.querySelector('.scroll-container::after');

container.addEventListener('scroll', function() {
  if (container.scrollTop > 0) {
    verticalLine.style.display = 'block'; /* 滚动时显示垂直线 */
  } else {
    verticalLine.style.display = 'none'; /* 滚动到顶部时隐藏垂直线 */
  }
});