Axure设计：自定义滚动条

1、参考早期“隐藏滚动条”的链接，把丑丑的滚动条隐藏起来~

2、新建一个“垂直线”，命名为“滚动条”，这里设置为“隐藏”状态；

“动态面板”命名为“框架”；

“动态面板”的state1内容组合下，命名为"内容"；

3、设置“滚动条”的“载入时”的交互动作：

---

设置“滚动条”的大小

---

4、设置“元件：框架”为局部变量LVAR1；

设置“元件：内容”为局部变量LVAR2；

所以“滚动条”的高为[[LVAR1.height*LVAR1.height/LVAR2.height]]；

设置“滚动条”的宽为3；

5、设置“框架”的“滚动时”的交互动作：

6、动作1：

---

显示“滚动条”，动画：逐渐，时间：200毫秒

---

7、动作2：

---

移动“滚动条”，到达指定位置，动画：线性，时间：200毫秒

---

8、设置“元件：滚动条”为局部变量LVAR1；

所以X的值为[[LVAR1.x]]；

9、设置“元件：框架”为局部变量LVAR1；

设置“元件：内容”为局部变量LVAR2；

所以Y的值为[[LVAR1.y+This.scrollY*LVAR1.height/LVAR2.height]]；

10、设置“框架”的“鼠标移出时”的交互动作：

---

隐藏“滚动条”，动画：逐渐，时间：200毫秒

---

11、恩，自定义的滚动条，效果就出来啦，滚动的时候，显示滚动条；页面内容滚动式，滚动条随着下移；鼠标移出后，滚动条逐渐消失……

12、觉得不错的话，请投个票，加个赞哦~