作品名稱：隱藏頁面滾動條的3種方法

作品編號：Case001

軟件版本：Axure9

作品類型：交互案例

原型預覽鏈接(附源文件下載鏈接)：http://daisyaxure.com/demo/Case001

很多朋友在使用Axure制作移動端原型時，希望內容區域在固定的區域內滾動，但是轉換為動態面板后，顯示滾動條會使美觀度大打折扣，本文將介紹3個可以隱藏滾動條的小tips。

方法一：使用設備模版素材進行遮擋?

1.按照下圖所示準備好所有的元件，頁面排列方式選擇居中，這樣可以保證預覽時我們內容始終是頁面居中顯示的。

2.選中「內容區」的所有元件，右鍵轉換動態面板。

3.調整動態面板的高度，使其小于內部內容區的高度，右鍵-【滾動條】-選擇【垂直滾動】，這時候動態面板右側會出現一條滾動條。

4.拉寬動態面板，使滾動條位于內容區之外。

5.拖入我們設備模版素材，置于所有元件圖層的頂層，調整內容區動態面板的寬度和位置，使設備模版可以遮擋住我們的滾動條即可。

預覽效果：

當然設備素材也可以用一條和矩形等高等寬的矩形元件來替換，置于滾動條之上即可。

方法二：轉換兩次動態面板?

方法一僅限于設備模版素材的寬度足以遮擋住滾動條的情況，如果不想添加設備素材，或設備素材的邊框比較寬度不足以遮擋滾動條時，我們可以通過轉換兩次動態面板的方式來遮擋。

1.首先按照方法一中的步驟1-4制作出第一層動態面板，在此動態面板的基礎上右鍵再次轉換為動態面板。

2.將外層動態面板的寬度調至和「內容區」一致，這時就能遮擋住內層動態面板的滾動條了，這樣既實現滾動效果又完美的隱藏了滾動條。

預覽效果：

方法三：利用內聯框架結合動態面板實現?

1.首先在內容區內拖入一個內聯框架的元件，在右側樣式面板中勾選【隱藏邊框】，調整內聯框架寬度和高度，使滾動條超出內容區。

2.新增一個頁面，命名為「內容頁」，內容區的高度大于內聯框架的高度，在內容頁內填充好內容。雙擊之前拖入的內聯框架，鏈接到「內容頁」。

3.右鍵將內聯框架轉化為動態面板，同樣將動態面板的寬度調小至能遮擋住內聯框架的滾動條即可。

預覽效果：

---

更多高保真原型及交互案例請訪問：http://daisyaxure.com

總結

以上是生活随笔為你收集整理的【Axure交互教程】 隐藏页面滚动条的3种方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。