編輯導語：無痕滾動條相比與傳統滾動條舒适感好了很多，整體也較為美觀簡潔，本篇文章作者分享了制作無痕滾動條的具體方法，感興趣的小夥伴們一起來學習一下吧，希望對你有幫助。

在使用Axure制作滾動頁面效果的時候，大家第一時間，肯定會想到使用動态面闆去實現效果。

但是動态面闆自帶的滾動條，樣式實在是有點醜醜的。有沒有辦法讓這個醜醜的滾動條消失呢？今天就和大家分享一下如何制作無痕滾動條。

一、演示效果

二、制作步驟

1. 第一步：繪制需要滾動的内容

使用Axure自帶的元件繪制出需要需要滾動的内容，這部分的内容所主要用于動态面闆滾動時顯示。

2. 第二步：轉化動态面闆

繪制完成後，選中所有的元件，在元件上點擊右鍵，選中“轉換為動态面闆”，也可以使用“Ctrl Shift Alt D”進行。

3. 第三步：設置面闆尺寸&顯示滾動條

首選，我們需要将動态面闆的高度設置成500，這裡的500是一個參考值，随意設置，隻需要比動态面闆中内容的高度小即可，隻有這樣才會在滾動時才會出現滾動條。

其次，在動态面闆上點擊右鍵，依次選擇“滾動條/垂直滾動條”，這裡選擇垂直滾動條是因為我們繪制的内容是需要垂直滾動的。

當勾選“垂直滾動”後，你會發現一個問題，滾動條蓋住了動态面闆中的部分内容（如下圖所示），也就是說我們需要增加默認動态面闆的寬度，以調整被滾動條蓋住的部分能夠顯示。

這裡我們将動态面闆的寬度增加18就正常了，因為18是axure滾動條的寬度，調整前後對比如下。

4. 第四步：隐藏滾動條

這裡隐藏滾動條的方法，也許有朋友會使用一個新的矩形，将矩形顔色調整為和底色相同，直接覆蓋在動态面闆上，這的确也是一個方法，但是如果底色複雜，是背景圖，或者漸變色，這種方法就不行了。

我使用的方法也很簡單，在現有動态面闆的基礎上，再套一個動态面闆，并且将新面闆的尺寸設置成250×500，也就是默認動态面闆的原始尺寸，以達到隐藏滾動條的目的。

也就是說這裡包含了2層動态面闆，内層是真正的包含滾動條的動态面闆；外層是通過尺寸隐藏滾動條的動态面闆。

上圖可以看出虛線框，也就是外層動态面闆的區域範圍，可以看到内層動态面闆的滾動條已經在虛線框外了。

刷新預覽一下頁面感受一下效果吧！

三、結尾

其實Axure雖然在原型上功能還算比較強大的，但是在美觀度的控制上，依然不如代碼，所以在制作高保真原型的時候，肯定會需要一些奇特的方法來實現最終的效果。

感謝閱讀，希望我的文章，能夠幫助到你！

本文由 @IMZQZ 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部