滚动下拉菜单间距，下拉滚动滚动

Question

滚动之前：菜单很好 ()

滚动并再次单击该下拉按钮后，菜单从下拉按钮移动 ()

你可以参考这个

:host .dropdown--popover {
    position: fixed;
    display: none;
    min-width: var(--exo-size-3);
    min-height: var(--exo-size-1);
    z-index: 1010;
}


:host .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    box-sizing: border-box;
    border: var(--exo-spacing-4x-small) solid var(--exo-color-border);
    border-radius: var(--exo-radius-large);
    box-shadow: var(--exo-box-shadow-moderate);
    background-color: var(--exo-color-background);
    padding: var(--exo-spacing-x-small) 0;
    overflow: hidden;
    outline: none;
    font: var(--exo-doc-body-small);
}

滚动前下拉菜单很好，但在滚动并尝试打开下拉菜单后，下拉菜单从按钮中移出

Answer 1

由于未提供 HTML 标记，我无法为您实际测试解决方案。但是，我认为菜单在滚动时没有移动的原因是因为您已将位置设置为固定。

这会导致菜单的位置相对于视口，因此在滚动时不会移动。您可以在此处进一步了解职位：https://www.w3schools.com/css/css_positioning.asp