javascript - 如何只允许某些组件滚动并保持某些 React 组件固定？

Question

我正在尝试使用 React 创建我自己的 Spotify Web 应用程序版本，并且我已经为播放器、左侧菜单以及艺术家、轨道和其他网站的实际页面制作了必要的组件，但我试图将它们放在一起。我如何设置它，以便您可以像在应用程序中一样仅滚动页面的特定部分。我使用 postion:fixed; 使菜单和播放器在滚动页面时保持静态，但现在显示专辑和播放列表等信息的其他组件将与播放器和菜单重叠。如何解决此问题，以便菜单和播放器不会与其他组件重叠，并且一旦到达某个点，滚动条就不会位于播放器顶部？

这是一张图片供引用，它应该是什么样子。右侧显示滚动条，并且永远不会与播放器重叠。

这就是我的应用程序在我仅使用 Flexbox 和页面上的组件时的样子。一旦您向下滚动得足够远，左侧的播放器和菜单就会消失，屏幕上只会显示包含艺术家和专辑的菜单。

第三张图显示了当我对菜单和播放器进行定位时会发生什么:固定它会渗透到搜索列表等其他组件中，但如果向下滚动，播放器和菜单将在搜索时保留在屏幕上组件移动。

return (
        <div className="App">
            <div className="Menu">
                <Menu />
                <Player className="Player" callbackFromParent={this.callBack}/>
            </div>
            <div className="Component">
                <Router>
                <Route path='/ArtistPage' exact component={ArtistPage} />
                <Route path="/search" exact component={Search} />
                <Route path="/AlbumPage" exact component={AlbumPage}/>
                <Route path="/profile" exact component={Profile} />
                <Route path="/playlistPage" exact component={PlaylistPage}/>
                </Router>
            </div>
        </div>
      );

这是我的代码，我尝试将菜单和播放器以及随页面更改而更改的其余组件分开。

.App {
  display: flex;
  flex-direction: row;
}

.Component {
  vertical-align: left;
}

.Menu {
  display: flex;
  position: fixed;
  flex-direction: column;
}

这是 css 代码，显示了上面相互渗透的组件图片的格式。感谢您的阅读。

Answer 1

position:fixed 从文档的正常流程中删除该元素。

因此，其余元素的行为就好像该元素(位置:固定)不存在，从而导致重叠。

您必须为 .Component div 提供等于 .Menu div 宽度的 margin-left