Question

我使用的图书馆是https://www.npmjs.com/package/react-sidebar。我将按钮放在section2中，它位于section1中。我也不能滚动。如何将按钮移至section2？该按钮在滚动过程中不会移动。

此处的代码：https://stackblitz.com/edit/react-2euk2q

绘图：https://imgur.com/7xpmy93

import Sidebar from "react-sidebar";


class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      sidebarOpen: false
    };
  }

  onSetSidebarOpen = (open) => {
    this.setState({ sidebarOpen: open });
  }

  render() {
    return (
      <div className="container">
          <div className="section1">
           <p>Lorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodo</p>
          </div>
          <div className="section2">
            <Sidebar
              sidebar={ 'Lorem ipsum'}
              open={this.state.sidebarOpen}
              onSetOpen={this.onSetSidebarOpen}
              styles={{ sidebar: { background: "white" } }}
              pullRight={true}
            >
            <button onClick={() => this.onSetSidebarOpen(true)}>
              Open sidebar
            </button>
          </Sidebar>
             <p>Lorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodoLorem ipsum dolor sit amet consectetur adipiscing elitSed sollicitudin ante et dolor bibendum nec eleifend metus maximus Quisque eleifend massa sit amet efficitur rhoncus libero sem rutrum mauris eget suscipit diam mauris quis nisl Curabitur vitae pharetra massa Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas Aenean tincidunt placerat velit vel ultrices nulla egestas id Ut commodo</p>
          </div>
      </div>
    );
  }
}

CSS

.container {
  height: 400px;
  width: 400px;
  border: 1px solid black;
  overflow: scroll;
  display: flex;
  flex-direction: row;
}

.section1 {
  border: 1px solid red;
}

.section2 {
  border: 1px solid yellow;
}

.section2 button {
  left: 200px !important;
}

Answer 1

您的Sidebar组件具有自己的CSS，

position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: hidden;

您需要将postion:relative添加到section2中。

.section2 {
  border: 1px solid yellow;
  position: relative;     //Add this
}

现在您的按钮将位于左上角，您可以使用CSS将该按钮移动到任何位置。

.section2 button{
  position:absolute;
  right: 0;
}

更改按钮在“反应侧栏”库中的位置

1 个答案: