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 = thisdocument.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)}}
注：此种方法仅适用于webkit内核的浏览器
