Axure设计:自定义滚动条

 时间:2026-02-14 12:06:48

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

Axure设计:自定义滚动条

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

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

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

Axure设计:自定义滚动条

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

---

设置“滚动条”的大小

---

Axure设计:自定义滚动条

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

设置“元件:内容”为局部变量LVAR2;

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

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

Axure设计:自定义滚动条

Axure设计:自定义滚动条

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

Axure设计:自定义滚动条

6、动作1:

---

显示“滚动条”,动画:逐渐,时间:200毫秒

---

Axure设计:自定义滚动条

7、动作2:

---

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

---

Axure设计:自定义滚动条

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

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

Axure设计:自定义滚动条

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

设置“元件:内容”为局部变量LVAR2;

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

Axure设计:自定义滚动条

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

---

隐藏“滚动条”,动画:逐渐,时间:200毫秒

---

Axure设计:自定义滚动条

Axure设计:自定义滚动条

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

Axure设计:自定义滚动条

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

  • 原神怎么往上飞行
  • 原神鬼伞如何获得
  • 卡在更新icloud设置
  • 神雕侠侣2精巧四象佩怎么获得
  • 原神雷电将军特训怎么过关
  • 热门搜索
    什么是庄家 山姜的功效与作用 什么是造型艺术 居士是什么意思 百合是什么意思 什么叫股权激励 集思广益的意思 彷徨的意思 coat是什么意思中文 耶斯莫拉是什么意思