具有独立滚动列的材质 UI 网格

Question

我希望在 React 中使用 Material UI 制作多个滚动列。我有一种方法可以在带有flex的引导中做到这一点，但是我无法将其翻译过来。我已经整理了一个黑客方法的演示，该方法需要知道您尝试滚动的内容上方的内容的大小(在本例中为 AppBar(

https://codesandbox.io/s/pmly895mm

html,
body {
margin: 0;
height: 100%;
}
#root {
height: 100%;
}
.grid-container {
height: calc(100% - 64px);
}
.grid-column {
height: 100%;
overflow-y: auto;
}

在此演示中，我将所有高度设置为 100%(html、body #root(，然后创建了两个高度为 100% 的类grid-container- AppBar 高度和高度为 100% 且溢出为 autogrid-column。

在 Bootstrap 中，我会将这些类分别应用于row和column元素

。

.flex-section {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.flex-col-scroll {
flex-grow: 1;
overflow: auto;
min-height: 100%;
}

元素上方的东西并不重要，因为柔性会照顾高度。

具体来说，我希望避免做height: calc(100% - 64px)因为这需要我事先知道元素高度。我将有一些页面，我想将一些内容放在滚动区域上方，这些滚动区域将具有动态高的内容。

Answer 1

> 2020 更新

FWIW 我只能将这两个样式属性添加到Box组件中以实现可滚动的<div>列：

<Box style={{maxHeight: '100vh', overflow: 'auto'}}>...</Box>

Answer 2

在我决心重新创建我过去在引导程序 (https://jsfiddle.net/aq9Laaew/226591/( 中的做法时，我实际上也能够在 Material UI 中让它工作。由于我无法在这个特定用例(React/Material UI 可滚动列(上找到任何类型的示例，希望这会对其他人有所帮助。

下面是示例：https://codesandbox.io/s/z24wl3n58m

html,
body {
margin: 0;
height: 100%;
}
#root {
height: 100%;
display: flex;
flex-direction: column;
}
.flex-section {
flex-grow: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.flex-col-scroll {
flex-grow: 1;
overflow: auto;
min-height: 100%;
}
.flex-no-shrink {
flex-shrink: 0;
}

我缺少的是设置根部的弯曲。一旦我们这样做了，那么我们就可以利用flex-section、flex-col-scroll和flex-no-shrink(后者用于防止滚动上方的元素被压缩(

Answer 3

你只需要修复你的导航栏。它将保持完整到顶部。之后，向您添加一个填充grid container它将包含您的所有内容。您甚至可以提供百分比填充以确保响应能力。

这是工作代码沙箱：固定导航栏

让我知道问题是否仍然存在。

Answer 4

我发现使用 Material UI 的网格来做到这一点真的很困难，因为正如在对另一个答案的评论中指出的那样，如果没有"flex-wrap：nowrap"，它似乎无法实现，并且添加"flex-wrap：nowrap"会破坏 Material UI 的网格布局系统。

但是，我确实发现，如果我使用Material UI的框而不是网格，我可以很容易地使用固定标题和独立滚动列来重现Josh Sherman的布局。

在索引中.html：

<style>
body,
html,
#root {
height: 100%;
}
</style>

当然，#root 是由create-react-app创建的。

在 App.tsx 中：

import React from "react";
import { AppBar, Box, Toolbar } from "@material-ui/core";
function App() {
return (
<>
<AppBar>
<Toolbar />
</AppBar>
<Box flexDirection="column" display="flex" height="100%">
<Toolbar />
<Box flexGrow={1} display="flex" overflow="hidden">
<Box overflow="auto">
<!-- The contents of the left column go here -->
</Box>
<Box overflow="auto">
<!-- The contents of the right column go here -->
</Box>
</Box>
</Box>
</>
);
}
export default App;