我正在尝试检测打开的下拉菜单是否在用户视口中，或者是否在他的视野之外。我正在使用getBoundingClientRect()方法将矩形绳索与视口进行比较，但它的反应有点奇怪。如果菜单完全可见，则下拉列表应打开到底部，如果不可见，则应打开到顶部。为了简单起见，在我的示例中，它仅将方向记录到控制台。下面是页面底部下拉选择器的示例。如果打开它，它将对于视口来说太大，并且会出现滚动条。该函数应该检测到带有选项的下拉菜单不再在视口中，并且应该记录open to top但没有
请在Plunker找到示例。
那么如何检测我的下拉菜单是否在视口中，以决定是将其打开到顶部还是底部？
我宁愿不使用jQuery来解决这个问题，只有在不可避免的情况下！
主要原因是当你的dropdown-menu没有.shown类时，它的风格display: none。使用此样式函数getBoundingClientRect()返回类似 {top: 0, left: 0, width: 0, height: 0} 的内容。如果您单击以打开菜单，则更改isMenuOpen true但 Angular 需要一些时间来对该操作做出反应并添加class。因此，解决方案是在this.isMenuOpen = !this.isMenuOpen;到setTimeout后包装所有代码。