React-bootstrap Popover 不会留在滚动容器上的按钮上

Question

我在codesandbox here, follow the documentation code中重新创建了弹出窗口，弹出窗口出现了，但是滚动后，指针不再与按钮对齐，我尝试传递container属性，但仍然无法正常工作.我该如何解决这个问题？

重现

重现该行为的步骤：

点击按钮
出现弹出窗口
在容器中滚动
弹出框跟随滚动事件而不是元素。

可重现的例子

codesandbox

App.js

import "./styles.css";
import {
  Popover,
  OverlayTrigger,
  Button,
  ButtonToolbar
} from "react-bootstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

const popoverBottom = (
  <Popover id="popover-positioned-scrolling-bottom" title="Popover bottom">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

const popoverRight = (
  <Popover id="popover-positioned-scrolling-right" title="Popover right">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

export default class Positioner extends React.Component {
  render() {
    return (
      <div className="bs-example-popover-scroll">
        <ButtonToolbar style={{ padding: "100px 0" }}>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="bottom"
            overlay={popoverBottom}
          >
            <Button>Bottom guacamole!</Button>
          </OverlayTrigger>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="right"
            overlay={popoverRight}
          >
            <Button>Right guacamole!</Button>
          </OverlayTrigger>
        </ButtonToolbar>
      </div>
    );
  }
}

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";
import "bootstrap/dist/css/bootstrap.css";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.bs-example-popover-scroll {
  background: grey;
  padding: 20px;
  height: 200px;
  overflow: scroll;
  border: 1px solid black;
}

预期行为

弹出窗口应该与按钮元素而不是滚动容器一起使用。对您预期发生的事情进行清晰简洁的描述。

环境

操作系统：Catalina 10.15.7
浏览器，版本chrome版本95.0.4638.54
React-Bootstrap 版本 0.33.1（与文档相同）

Answer 1

你的代码是正确的。由于 popover 是一个绝对的 div，它是相对于具有 position relative 的父元素定位的。因为你没有提到父 div(.bs-example-popover-scroll) 作为相对的，popover 是相对于文档定位的，所以它不会根据滚动进行调整。

只需添加相对于 div.bs-example-popover-scroll 的位置即可

modified code sandbox example

App.js

import "./styles.css";
import {
  Popover,
  OverlayTrigger,
  Button,
  ButtonToolbar
} from "react-bootstrap";
import React from "react";
import "bootstrap/dist/css/bootstrap.css";

const popoverBottom = (
  <Popover id="popover-positioned-scrolling-bottom" title="Popover bottom">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

const popoverRight = (
  <Popover id="popover-positioned-scrolling-right" title="Popover right">
    <strong>Holy guacamole!</strong> Check this info.
  </Popover>
);

export default class Positioner extends React.Component {
  render() {
    return (
      <div
        className="bs-example-popover-scroll"
        style={{ position: "relative" }}
      >
        <ButtonToolbar style={{ padding: "100px 0" }}>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="bottom"
            overlay={popoverBottom}
          >
            <Button>Bottom guacamole!</Button>
          </OverlayTrigger>
          <OverlayTrigger
            container={this}
            trigger="click"
            placement="right"
            overlay={popoverRight}
          >
            <Button>Right guacamole!</Button>
          </OverlayTrigger>
        </ButtonToolbar>
      </div>
    );
  }
}

React-bootstrap Popover 不会留在滚动容器上的按钮上

React-boostrap Popover not stay with button on scroll container

javascript

reactjs

react-bootstrap

重现

可重现的例子

预期行为

环境