感謝導(dǎo)語(yǔ)：無(wú)痕滾動(dòng)條相比與傳統(tǒng)滾動(dòng)條舒適感好了很多，整體也較為美觀簡(jiǎn)潔，本篇文章感謝分享分享了制作無(wú)痕滾動(dòng)條得具體方法，感興趣得小伙伴們一起來(lái)學(xué)習(xí)一下吧，希望對(duì)你有幫助。

在使用Axure制作滾動(dòng)頁(yè)面效果得時(shí)候，大家第壹時(shí)間，肯定會(huì)想到使用動(dòng)態(tài)面板去實(shí)現(xiàn)效果。

但是動(dòng)態(tài)面板自帶得滾動(dòng)條，樣式實(shí)在是有點(diǎn)丑丑得。有沒(méi)有辦法讓這個(gè)丑丑得滾動(dòng)條消失呢？今天就和大家分享一下如何制作無(wú)痕滾動(dòng)條。

一、演示效果二、制作步驟1. 第壹步：繪制需要滾動(dòng)得內(nèi)容

使用Axure自帶得元件繪制出需要需要滾動(dòng)得內(nèi)容，這部分得內(nèi)容所主要用于動(dòng)態(tài)面板滾動(dòng)時(shí)顯示。

2. 第二步：轉(zhuǎn)化動(dòng)態(tài)面板

繪制完成后，選中所有得元件，在元件上感謝閱讀右鍵，選中“轉(zhuǎn)換為動(dòng)態(tài)面板”，也可以使用“Ctrl+Shift+Alt+D”進(jìn)行。

3. 第三步：設(shè)置面板尺寸&顯示滾動(dòng)條

一家，我們需要將動(dòng)態(tài)面板得高度設(shè)置成500，這里得500是一個(gè)參考值，隨意設(shè)置，只需要比動(dòng)態(tài)面板中內(nèi)容得高度小即可，只有這樣才會(huì)在滾動(dòng)時(shí)才會(huì)出現(xiàn)滾動(dòng)條。

其次，在動(dòng)態(tài)面板上感謝閱讀右鍵，依次選擇“滾動(dòng)條/垂直滾動(dòng)條”，這里選擇垂直滾動(dòng)條是因?yàn)槲覀兝L制得內(nèi)容是需要垂直滾動(dòng)得。

當(dāng)勾選“垂直滾動(dòng)”后，你會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，滾動(dòng)條蓋住了動(dòng)態(tài)面板中得部分內(nèi)容（如下圖所示），也就是說(shuō)我們需要增加默認(rèn)動(dòng)態(tài)面板得寬度，以調(diào)整被滾動(dòng)條蓋住得部分能夠顯示。

這里我們將動(dòng)態(tài)面板得寬度增加18就正常了，因?yàn)?8是axure滾動(dòng)條得寬度，調(diào)整前后對(duì)比如下。

4. 第四步：隱藏滾動(dòng)條

這里隱藏滾動(dòng)條得方法，也許有朋友會(huì)使用一個(gè)新得矩形，將矩形顏色調(diào)整為和底色相同，直接覆蓋在動(dòng)態(tài)面板上，這得確也是一個(gè)方法，但是如果底色復(fù)雜，是背景圖，或者漸變色，這種方法就不行了。

我使用得方法也很簡(jiǎn)單，在現(xiàn)有動(dòng)態(tài)面板得基礎(chǔ)上，再套一個(gè)動(dòng)態(tài)面板，并且將新面板得尺寸設(shè)置成250×500，也就是默認(rèn)動(dòng)態(tài)面板得原始尺寸，以達(dá)到隱藏滾動(dòng)條得目得。

也就是說(shuō)這里包含了2層動(dòng)態(tài)面板，內(nèi)層是真正得包含滾動(dòng)條得動(dòng)態(tài)面板；外層是通過(guò)尺寸隱藏滾動(dòng)條得動(dòng)態(tài)面板。

上圖可以看出虛線框，也就是外層動(dòng)態(tài)面板得區(qū)域范圍，可以看到內(nèi)層動(dòng)態(tài)面板得滾動(dòng)條已經(jīng)在虛線框外了。

刷新預(yù)覽一下頁(yè)面感受一下效果吧！

三、結(jié)尾

其實(shí)Axure雖然在原型上功能還算比較強(qiáng)大得，但是在美觀度得控制上，依然不如代碼，所以在制作高保真原型得時(shí)候，肯定會(huì)需要一些奇特得方法來(lái)實(shí)現(xiàn)最終得效果。

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

感謝由 等IMZQZ 來(lái)自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。