Question

在Chrome中，当鼠标位于“材料”的“输入数字”字段中时，我可以使用鼠标滚动该值。

我将代码上传到了stackblitz：https://stackblitz.com/edit/angular-bpj321，我发现在Chrome中，当鼠标位于字段中时我无法滚动，但是在Firefox中，我可以滚动。

我不想滚动，如何防止这种情况？

Answer 1

您可以手动禁用输入上的滚动事件：

找到输入元素：

const input = document.getElementById("your-input");

并禁用wheel默认功能：

    input.addEventListener("wheel", function(event) {
      event.preventDefault();
    });

Answer 2

我已经在我的app.component.ts中添加了这些行

@HostListener('mousewheel', ['$event']) onMouseWheelChrome(event: any) {
    this.disableScroll(event);
}

@HostListener('DOMMouseScroll', ['$event']) onMouseWheelFirefox(event: any) {
    this.disableScroll(event);
}

@HostListener('onmousewheel', ['$event']) onMouseWheelIE(event: any) {
    this.disableScroll(event);
}


disableScroll(event: any) {
    if (event.srcElement.type === "number")
        event.preventDefault();
}

有效。

角材料输入数字微调器滚动问题

2 个答案: