Angular Material如何在下拉菜单获得焦点时禁用全局滚动？_编程开发

Angular Material如何在下拉菜单获得焦点时禁用全局滚动？

创始人

2024-10-20 02:01:00

0次

要在Angular Material的下拉菜单获得焦点时禁用全局滚动，你可以使用@HostListener监听器来捕获滚动事件，并在下拉菜单获得焦点时阻止默认的滚动行为。以下是一个示例解决方案：

在你的Angular组件中导入ViewChild和ElementRef：

import { Component, ViewChild, ElementRef } from '@angular/core';

在组件类中使用ViewChild装饰器获取下拉菜单元素的引用：

@ViewChild('dropdownMenu') dropdownMenu: ElementRef;

在组件类中定义一个@HostListener监听器来捕获滚动事件：

@HostListener('window:scroll', ['$event'])
onWindowScroll(event) {
  // 阻止默认的滚动行为，如果下拉菜单获得焦点
  if (this.dropdownMenu.nativeElement.contains(event.target)) {
    event.preventDefault();
  }
}

在HTML模板中给下拉菜单添加一个模板引用变量：

在模板中使用dropdownMenu变量绑定到ViewChild获取的下拉菜单元素：

通过以上步骤，你就可以在下拉菜单获得焦点时禁用全局滚动了。

上一篇：Angular Material如何改变表单字段的外观？

下一篇：Angular Materials - Mat-Select 更改选择值的颜色

Angular Material如何在下拉菜单获得焦点时禁用全局滚动？

相关内容

热门资讯