Axure设计:隐藏滚动条

 时间:2026-02-12 02:53:48

1、这里使用一个手机模型展示,演示隐藏滚动条的方式~

所以拖出一个手机外壳模型,如下图所示:

Axure设计:隐藏滚动条

2、按“屏宽”限定,拖出“图片”和“占位符”组合布局如下图:

Axure设计:隐藏滚动条

3、如图转为“动态面板”

Axure设计:隐藏滚动条

Axure设计:隐藏滚动条

4、“动态面板”置于“手机”屏幕中,如下图所示:

Axure设计:隐藏滚动条

5、“动态面板”设置为“自动显示垂直滚动条”,

如下图所示:

Axure设计:隐藏滚动条

6、点击“预览”,看下效果……

恩……,滚动条确实很“碍眼”

Axure设计:隐藏滚动条

7、好,准备工作做好 ,下面用两个方式来隐藏滚动条~

1、使用“遮挡”滚动条的方式,来达到隐藏“滚动条”

2、新建2个矩形,按手机的右侧边缘设置大小和组合,如下图所示~

我这里演示的参数如下:

“矩形1”尺寸:17*563;

“矩形2”尺寸:6*55;

组合命名为“档条”;

Axure设计:隐藏滚动条

3、处理边线和圆角,如下图所示:

Axure设计:隐藏滚动条

Axure设计:隐藏滚动条

Axure设计:隐藏滚动条

4、“动态面板”拉宽,使其面板内容完全显示,并置于滚动条一边,如下图所示:

Axure设计:隐藏滚动条

5、用“组合:档条”置于“动态面板”的右边,遮挡“滚动条”,如下图所示:

Axure设计:隐藏滚动条

Axure设计:隐藏滚动条

6、预览,看下效果如何……

用鼠标滚轮可上下翻滚,完美不?

Axure设计:隐藏滚动条

1、把“动态面板”的宽度拉宽,任意;

Axure设计:隐藏滚动条

2、在此“动态面板”的基础上,再次选择“动态面板”,如下图所示~

你会发现,“面板”颜色或加深一点

Axure设计:隐藏滚动条

3、再次把“动态面板”的右边界,拉回原来的尺寸,如下图所示:

Axure设计:隐藏滚动条

Axure设计:隐藏滚动条

4、预览,看下效果如何……

是不是也很完美?

Axure设计:隐藏滚动条

1、以上两个方式,都能很好的隐藏”滚动条“,各有优缺点,按需选择吧~

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

  • 使用Axure如何实现左右滑动切换的效果?
  • 教大家如何使用Axure制作文字轮播的效果
  • Axure rp如何制作交互效果?
  • 墨刀如何创建原型项目#校园分享#
  • Axure 8.0中怎么制作手机上下滑动效果
  • 热门搜索
    男人出轨怎么办 水泡破了怎么办 婚房怎么布置 武松怎么死的 赛尔号泰坦怎么打 win7怎么进入bios 淘宝打不开怎么回事 斗兽场印章怎么获得 一年级手抄报怎么写 腰酸痛是怎么回事