[JavaScript知识库]angular自定义滚动条，滚动时显示，否则隐藏

html:

<div id="div_nav" class="div-class2"></div>

scss:

.div-class::-webkit-scrollbar {
  width: 8px;	// 滚动条宽度
  height: 8px	// 滚动条高度
}
    
.div-class::-webkit-scrollbar-thumb {
  border-radius: 4px;			// 滚动条圆角
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #999;		// 滚动条颜色
}

.div-class::-webkit-scrollbar-track {
  background-color: #ffffff;	// 滚动条背景色
}

.div-class {
  overflow-y: auto;
  width: 100px;
  height: 300px;
  color: white;
}

.div-class2::-webkit-scrollbar {
  display: none;	// 隐藏
  width: 8px;		// 滚动条宽度
  height: 8px		// 滚动条高度
}
    
.div-class2::-webkit-scrollbar-thumb {
  border-radius: 4px;			// 滚动条圆角
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  background-color: #999;		// 滚动条颜色
}

.div-class2::-webkit-scrollbar-track {
  background-color: #ffffff;	// 滚动条背景色
}

.div-class2 {
  overflow-y: auto;
  width: 100px;
  height: 300px;
  color: white;
}

ts:

roll = 0; // 滚动的值
stop = 0; // 对比时间的值
timer = null;
  
ngOnInit() {
    const that = this
    document.getElementById('div_nav').addEventListener('scroll', function(event) {
      const e = event || event.target;
      // 每次滑动前都清除一遍我们定义的定时器
      clearTimeout(that.timer);
      $('#div_nav').attr('class', 'div-class');
      // 这里我设置的是300毫秒，您可以更改您想要的间隔秒数
      that.timer = setTimeout(() => {
        that.JudgeScroll()
      }, 300);
      that.roll = (<Element>(<Event>e).srcElement).scrollTop;
    })
  }

  JudgeScroll() {
    this.stop = document.getElementById('div_nav').scrollTop;
    if(this.stop === this.roll) { // 滚动停止
      setTimeout(() => {
        $('#div_nav').attr('class', 'div-class2');
      }, 1000)
    }
  }