Feat: scroll primitives

[runspired]

I'm thinking about adding an API for scrollable boxes. This is a first pass idea of one way this might be done.

Properties

• scrollX
• scrollY
• scrollXY
• scrollNone

Breakpoint Attributes

• xs="scrollX"
• sm="noScrollX"

I'm also investigating whether an element approach might be more ideal.

<scrollable scrollX scrollY>
</scrollable>

The element approach would lend itself well to situations in which custom scroll solutions are needed, or where you want to wrap occlusion/recycling based list solutions such as ember-collection or smoke-and-mirrors.

[RobbieTheWagner]

Definitely interested in having some nicely defined way of ensuring things scroll or don't scroll. I always have trouble with scrolling and flexi.

[kybishop]

An example workaround currently exists here.

The trouble with implementing a scroll primitive is that we need a lot of prior knowledge about the AST: is there a parent with a statically defined height, or a chain of parents with percentage heights that eventually lead to an element with a statically defined height? If not, the scroll primitive will not work.

I don't think there is a magic way of making it work either; the user needs to somehow define the/a parent's height. I suppose we might be able to set a cascade of height: 100% if we know a page or screen exists somewhere up the tree? Will keep thinking about this.

I'm not yet sure how the CSS AST works, but hope to find out soon while hacking on the CSS optimizer. For now, the workaround will hopefully suffice for people that need this kind of scrolling.