應業(yè)務需求，順手寫了個輪子
兼容性應該不差
這個是
TS版的，要用到JS里面的話要稍做調(diào)整
export class WheelDirective {
private el: HTMLElement;
constructor(nativeElement : HTMLElement) {
this.el = nativeElement;
this.handleWheelEvent();
}
handleWheelEvent () {
const event = window.addEventListener ? 'addEventListener' : 'attachEvent';
let wheel = '';
if ('onmousewheel' in this.el) {
wheel = 'mousewheel';
} else if ('onwheel' in this.el) {
wheel = 'wheel';
} else if ('attachEvent' in window) {
wheel = 'onmousewheel';
} else {
wheel = 'DOMMouseScroll';
}
this.el[event](wheel, this.scroll);
}
scroll = (event) => {
if (this.el.clientWidth >= this.el.scrollWidth) { return; }
event.preventDefault();
this.el.scrollLeft += event.deltaY
? event.deltaY
: (event.detail && event.detail !== 0)
? event.detail
: -event.wheelDelta;
}
}
API
const Ele = document.getElementById('ID');
new WheelDirective(Ele);
