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

Posted 2023-04-15

【中文标题】如何只允许某些组件滚动并保持某些 React 组件固定？

【英文标题】：How can I only allow certain components to scroll and keep certain React components fixed?

【发布时间】：2020-06-23 12:32:51

【问题描述】：

我正在尝试使用 React 创建我自己版本的 Spotify 网络应用程序，并且我已经为播放器、左侧菜单以及艺术家、曲目和其他网站的实际页面制作了必要的组件，但我试图将它们放在一起。如何设置它，以便您只能滚动页面的特定部分，例如在应用程序中。我使用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 代码。感谢您的阅读。

【参考方案1】：

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

因此，其余元素的行为就好像该元素（位置：固定）不存在导致重叠。

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

【参考方案2】：

您可以尝试使用height: 100% 将卡片的内容包装在一个div 中，然后将overflow-y: auto 添加到您的div 中。所以你的应用的侧边栏不会移动。

类似这样的：

<div class="app"> 
  <div class="sidebar">
    <!-- Sidebar not scrollable -->
  </div>
  <div class="main-content">
    <!-- All scrollable content should be put in here -->
  </div>
</div>

.app 
  width: 100vw;
  height: 100vh;

.sidebar 
  height: 100%;

.main-content 
  height: 100%;
  overflow-y: auto; // You can use scroll too