你多输入几行就能看到上下也可以滚动了。
如果设置overflow:auto。滚动条就可以自动按情况显示或隐藏了。
另外，overflow-x，overflow-y可以单独设置左右或上下滚动。
state数据2
/5
渲染列表
3
/5
触发向上、向下滚动方法
开始滚动：setInterval() 定时调用滚动方法
停止滚动：clearInterval() 取消定时器
4
/5
向上滚动方法：
1、数组第一条添加到数组末尾 - push()
2、列表向上滚动添加css3过渡动画
3、计算向上滚动距离（第一条数据高度，如果高度固定用固定值即可）
4、删除数组第一条数据 - shift()
5、向上滚动距离清零
6、取消过渡动画停止滚动
5
/5
向下滚动方法：
1、列表向下滚动添加css3过渡动画
2、计算向下滚动距离（最后一条数据高度，如果高度固定用固定值即可）
3、数组最后一条数据添加到数组头部 - unshift()
4、第一条数据添加渐显动画
5、删除数组最后一条数据 - pop()
6、向上滚动距离清零
7、取消过渡动画停止滚动
<style type="text/css">html,body{height:100%}/*定义高度为100%*/
*{margin:0padding:0}
.header,.footer{width:100%height:5%background:#000}/*上下高度5%；中间盒子高度90%*/
.main{overflow-y:scrollwidth:100%height:90%}
.main p{height:1500pxwidth:100%text-align:centerline-height:1500px}
</style>
<div class="header"></div>
<div class="main">
<p>高度1500px</p>
</div>
<div class="footer"></div>
顶部和底部高度5%；中间盒子高度90%，这样刚好100%，你内容填充到中间的盒子就行，如果需要特殊样式，顶部和底部可以用position定位，main盒子加上margin-top、margin-bottom分别等于顶部和底部的高度就行
所有div的总高度不能大于100%，不然会出现2个滚动条，因为现在的滚动条是main盒子的，如果超过100%；浏览器的滚动条也会出现
