滚动条

定义

作为最基础的可视交互控件，显示内容的长度、映射当前内容与整个页面所有内容的相对位置快速查找内容。

交互说明

1、默认状态

页面静止时，默认此时没有滚动条，滚动条处于隐藏状态。

2、页面内鼠标滚动

当页面内鼠标滚动时，滚动条出现；

滚动条贴着窗口边缘。

滚动条宽度为：6px；高度根据内容适应；

3、鼠标hover时

当鼠标放在滚动条上或者鼠标放在滚动条区域时，

此时是滚动条的hover状态，滚动条宽度不变，颜色变化；

滚动条可以上下拖动。

4、鼠标移开

当鼠标不在滚动条上且页面静止时，滚动条隐藏。

颜色

1、浅色背景时

当内容背景为浅色填充时，

滚动条的默认颜色为：25%，#000000

hover状态颜色为：在默认颜色的基础上叠加10%，#000000

长按状态颜色为：在默认颜色的基础上叠加15%，#000000

2、深色背景时

当内容背景为浅色填充时，

滚动条的默认颜色为：25%，#ffffff

hover状态颜色为：在默认颜色的基础上叠加20%，#ffffff

长按状态颜色为：在默认颜色的基础上叠加10%，#000000

位置

1、滚动条在导航功能下方

当有顶部导航功能时，滚动条应该在导航内容下方。

2、滚动条在内容区域的上方

滚动条应该在内容区域的上方，不需要额外占用空间。