监听滚动事件-以行高整数倍滚动(angular)

129 阅读1分钟

保证滚动时每行完整显示,不会像下图一样只显示一半

image.png

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);

}

监听滚动后,不管怎么滚动都完整显示行

image.png