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