手机垂直划屏效果从零学起（二）

　　效果图

　　通过效果图我们可知我们的期望效果如下：

　　1、拖动开始时显示滚动条

　　2、拖动结束时隐藏滚动条

　　3、滚动条长度和文章总高度是成比例的

　　4、拖动到上边界时滚动条会成比例的缩短

　　5、拖动结束时滚动条会变回原来的高度

　　变量名说明

　　下文中说的main=显示范围层，text=内容层，bar=滚动条。

　　页面载入时

　　载入时要让滚动条的高度根据比例变为指定高度

　　[[main.height/text.height*main.height]]

　　main拖动开始时

　　显示bar

　　main拖动结束时

　　隐藏bar

　　拖动到上下边界结束时将bar还原到原来的高度，上下边界的锚点不同。

　　拖动到上边界时要以顶部为锚点，拖动到下边界时要以顶部为锚点。

　　拖动时对内容和bar进行拖动范围上下限设置

　　【重点：要用心理解，不理解自己画图理解。】

　　向下拖拽到上边界的情况，判定条件：[[text.y]]>0

　　此时，需要将bar的高度设置为[[main.height/text.height*main.height*(1-(text.y/(main.height*0.5)))]]

　　分解：

　　main.height/text.height=显示范围和内容页的比例

　　比例*main.height=滚动条标准高度

　　main.height*0.5=半屏高度

　　text.y=拖动超出上边界值

　　1-拖动超出上边界值/半屏高度=滚动条高度系数

　　滚动条标准高度*滚动条高度系数=此时滚动条的高度

　　贵阳航洋动漫职业学校是贵阳市教育局批准(贵阳市教[2010]15号)设立的跨专业(包含计算机平面设计、动漫与游戏制作、影像与影视技术、绘画等专业)、多门类、全日制中等专业职业学校，同时也是一所实行准军事化管理的学校。