Axure设计:自定义滚动条

2025-06-01 18:43:32

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

Axure设计:自定义滚动条

2、新建一个“垂直线”,命名为“滚动条”,这里设置为“隐藏”状态;“动态面板”命名为“框架”;“动态面板”的state1内容组合下,命名为"内容";

Axure设计:自定义滚动条

3、设置“滚动条”的“载入时”的交互动作:---设置“滚动条”的大小---

Axure设计:自定义滚动条

4、设置“元件:框架”为局部变量L外狒芙梨VAR1;设置“元件:内容”为局部变量LVAR2;所以“滚动条”的高为[[LVAR1.height*LVAR1.height/LVAR2.hei爿讥旌护ght]];设置“滚动条”的宽为3;

Axure设计:自定义滚动条
Axure设计:自定义滚动条

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

Axure设计:自定义滚动条

6、动作1:---显示“滚动条”,动画:逐渐,时间:200毫秒---

Axure设计:自定义滚动条

7、动作2:---移动“滚动条”,到达指定位置,动画:线性,时间:200毫秒---

Axure设计:自定义滚动条

8、设置“元件:滚动条”为局部变量LVAR1;所以X的值为[[LVAR1.x]];

Axure设计:自定义滚动条

9、设置“元件:框架”为局部变量L外狒芙梨VAR1;设置“元件:内容”为局部变量LVAR2;所以Y的值为[[LVAR1.y+This.scrollY*LVAR1.height/LVAR2.height]];

Axure设计:自定义滚动条

10、设置“框架”的“鼠标移出时”的交互动作:---隐藏“滚动条”,动画:逐渐,时间:200毫秒---

Axure设计:自定义滚动条
Axure设计:自定义滚动条

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

Axure设计:自定义滚动条

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

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢