保证滚动时每行完整显示,不会像下图一样只显示一半
import { cloneDeep } from 'lodash';
public scrollListen;
constructor(
) {
}
ngOnInit(): void {
this.addScrollListen()
}
private addScrollListen(): void {
let p = 0;
let t = 0;
const element = document.querySelector('.div01') as HTMLElement;
this.scrollListen = () => {
const trHight = 18;
p = element.scrollTop;
const s = cloneDeep(p);
let changeC: number;
if (t <= p) {
changeC = Math.ceil(s / trHight) * trHight; // scroll down
} else {
changeC = Math.floor(s / trHight) * trHight; // scroll up
}
element.scrollTop = changeC;
setTimeout(function () {
t = p;
}, 0);
};
element.addEventListener('scroll', this.scrollListen, true);
}
ngOnDestroy(): void {
document.querySelector('.div01')?.removeEventListener('scroll', this.scrollListen, true);
}
监听滚动后,不管怎么滚动都完整显示行