问题

我正在使用[NativeBase](https://docs.nativebase.io)的弹出组件来创建我的弹出窗口：

```jsx
const SettingsButton: React.FC<Props> = () => {
    return (
        <Popover
            trigger={(triggerProps) => {
                return (
                    <Button {...triggerProps} variant={'ghost'}>
                        <HamburgerIcon size="xl" color="lightText" />
                    </Button>
                );
            }}
        >
            <SettingsPopover />
        </Popover>
    );
};

(完整应用程序在这里，弹出窗口在这里)

我希望弹出窗口后面的页面可以滚动，类似于在打开右侧的设置/个人资料弹出窗口时可以滚动GitHub页面。

到目前为止，我能想到的最好的方法是将以下代码放在我的弹出窗口组件中：

onOpen={() => {
    document.body.style.overflow = 'scroll';
}}
onClose={() => {
    document.body.style.overflow = 'hidden';
}}

但这会添加第二个滚动条，并在滚动时直接关闭弹出窗口（在移动版应用程序中不会有任何变化），这是一个有点糟糕的解决方案，我认为一定有更好的方法。

<details>
<summary>英文:</summary>

I&#39;m using the Popover component from [NativeBase](https://docs.nativebase.io) to create my popover:

const SettingsButton: React.FC<Props> = () => {
return (
<Popover
trigger={(triggerProps) => {
return (
<Button {...triggerProps} variant={'ghost'}>
<HamburgerIcon size="xl" color="lightText" />
</Button>
);
}}
>
<SettingsPopover />
</Popover>
);
};

(Full App is [here](https://github.com/Fabian5150/user-app), Popover is [here](https://github.com/Fabian5150/user-app/blob/main/src/components/SettingsButton.tsx))

I want the Page behind the Popover to be scrollable, similar to how you can scroll the [Github](https://github.com) Page when your Settings/Profile-Popover in the right is opened.

The best thing I could come up with so far, is to put 

onOpen={() => {
document.body.style.overflow = 'scroll';
}}
onClose={() => {
document.body.style.overflow = 'hidden';
}}

in my Popover-Component, but that adds a second scrollbar and closes the Popover directly when scrolling (and in the mobile version of the app it doesn't change anything), it's a bit of a shitty solution and I think there must be a better way.

</details>


# 答案1
**得分**: 1

I believe `position: fixed;` on the popover may do what you want. 

`position: fixed;` makes the popover stay in position regardless of where the viewport is, you can configure where it displays using `top`, `left`, or other CSS.

> fixed
>
> The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or the will-change property is set to transform, in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

[position - MDN][1]

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example

<details>
<summary>英文:</summary>

I believe `position: fixed;` on the popover may do what you want. 

`position: fixed;` makes the popover stay in position regardless of where the viewport is, you can the configure where it displays using `top`, `left`, or other CSS.

&gt; fixed\
&gt;\
&gt; The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or the will-change property is set to transform, in which case that ancestor behaves as the containing block. (Note that there are browser inconsistencies with perspective and filter contributing to containing block formation.) Its final position is determined by the values of top, right, bottom, and left.

[position - MDN][1]


  [1]: https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example

</details>