滚动场景在App的开发过程中很常见，而且在我们公司滚动的方式多种多样，在解决bug的道路上，引发了我关于滚动的一些思考。
使用过ionic的都知道，要想使ion-scroll可以滚动，则必须设置滚动视图的大小。否则无法滚动(提示：如果你发现你没那么做，可以滚动，请不要高兴的太早哈，因为不会发现PC和手机端总有一个会出问题，都没出问题的话，某些手机机型也有可能会出问题)。
今天我就在思考，ion-scroll必须设置大小才能滚动，那为什么ion-content可以直接滚动呢？审查元素可以发现，ion-content的高度为是确定了的，如果有header，ionic会为ion-content添加has-header样式，类似的样式还有has-footer和has-tabs等。
ionic结构
审查元素看完ionic的结构，一些思路也就很清晰了。仔细看ionic项目中的body元素的高度为零。而是通过一个绝对定位元素达到整屏的目的。
ion-nav-view
直接上关键样式，样式的主要目的就是达到全屏。
.view-container {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
ion-view
这个样式和ion-nav-view有点类似，但是给了一个新思路，个人觉得这里的width和height已经没有必要了，新思路就是在绝对定位下，可以通过top、bottom、left、right细分区域大小。
.pane, .view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
ion-content
这里思路也就很清晰了，首先使用绝对定位配合top、bottom、left、right值为0占满全屏，然后根据头尾是否有header、footer、tabs情况进行细分。
.scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
width: auto;
height: auto;
}
.has-header {
top: 44px;
}
.has-tabs, .bar-footer.has-tabs {
bottom: 49px;
}
总结
很多时候确定容器的大小习惯使用百分比，但是在排除掉一部分区域的时候表现的不是很灵活，ionic的布局中给了一种新思路！
目前办法的不足
CSS3提出的flex弹性盒子布局确实很好用，很多用CSS2很麻烦的问题，用flex布局都会迎刃而解，导致本人很多时候没有细加思考直接使用flex布局，但是flex布局在某些设备上存在不兼容的问题，因此在这里想说的是当你用flex布局时，多想一想可不可以使用CSS2解决呢，很多时候使用CSS2看起来会很酷。
目前在项目中碰到局部滚动的情形时，很多的时候使用flex布局，将剩余区域通过flex:1的方式分配给ion-scroll，这样一来设置了ion-scroll滚动区域的大小，也就实现了滚动。
通过ionic给的思路可以发现，我们可以不通过百分比或者flex布局，而是通过绝对定位来设置ion-scroll的大小。
那么是否flex布局在这里就没有应用场景了呢？当然不是，如果非滚动区域的大小是动态的时，我们也就只能通过flex布局来实现自动将剩余区域分配给ion-scroll元素了，因为通过绝对定位需要知道非滚动区域的大小。