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

问题描述：

我正在使用React中的Material UI创建多个滚动列.我有一种使用flex进行引导的方法，但是我无法将其翻译过来.我整理了一个演示方法，要求知道要尝试滚动的内容的大小(在本例中为AppBar)

I'm looking to make multiple scrolling columns using Material UI in React. I had a way of doing it in bootstrap with flex, but I can't get it to translate over. I have put together a demo of a hacky way to do it that requires knowing the size of the contents above what you're trying to scroll (in this case, the 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的grid-column ％和自动溢出.

In this demo, I set all of the heights to 100% (html, body, #root) and then created two classes grid-container with a height of 100% - AppBar height and grid-column with a height of 100% and an overflow-y of auto.

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

In Bootstrap, I would apply these classes to the row and column elements respectively

.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负责高度.

And it wouldn't matter what was above the elements because flex took care of the heights.

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

Specifically, I am looking to avoid having to do height: calc(100% - 64px) as this requires me knowing the element heights beforehand. I'm going to have some pages where I'd like to put some content above the scrolling area that will have dynamically tall content.

答

我决心重新创建自己过去在引导程序中所做的工作( https://jsfiddle.net/aq9Laaew/226591/)实际上，我也能够使其在Material UI中正常工作.而且由于无法在此特定用例(反应/材质UI可滚动列)上在线找到此类示例，因此希望对其他人有所帮助.

In my determination to recreate how I used to do it in bootstrap (https://jsfiddle.net/aq9Laaew/226591/) I was actually able to get it working in Material UI as well. And since I wasn't able to find any sort of examples of this online for this specific use case (React / Material UI scrollable columns), hopefully this will help someone else.

以下是示例: 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.一旦做到这一点，就可以利用flex-section，flex-col-scroll和flex-no-shrink(后者用于防止滚动上方的元素被压缩)

What I was missing was setting the flex on the root. Once we do that, then we can utilize flex-section, flex-col-scroll, and flex-no-shrink (the latter of which is used to prevent elements above the scrolling from being compressed)

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

相关推荐