網(wǎng)頁orApp鼠標(biāo)滾動效果在原型設(shè)計(jì)中如何實(shí)現(xiàn)，文章對此作出了分享。

前些天要做一個(gè)高保真的email應(yīng)用原型，在做滑動顯示郵件列表的時(shí)候發(fā)現(xiàn)自用各種事件都滿足不了，網(wǎng)上也沒有一個(gè)比較規(guī)范的教程，自己特意整理了一下，在做網(wǎng)頁或者app時(shí)能模仿出鼠標(biāo)滾動效果，注意是滾動，不是點(diǎn)擊拖動。

步驟1：將“內(nèi)部框架組件”組件拖拽到“index”頁面，設(shè)置好坐標(biāo)和大小。

步驟1圖

步驟2：將“內(nèi)部框架組件”組件轉(zhuǎn)換成動態(tài)面板，默認(rèn)狀態(tài)為state1并取消勾選“自動調(diào)整為內(nèi)容尺寸”。

步驟2圖

步驟3：切換到“內(nèi)部框架”頁面，將“內(nèi)部框架組件”組件的滾動條設(shè)置為“從不顯示滾動條”。

步驟3圖

步驟4：切換到“index”頁面，在此頁面的上點(diǎn)擊鼠標(biāo)右鍵，再設(shè)置滾動條為“從不顯示滾動條”，并再檢查 index頁面的動態(tài)面板是否取消勾選“自動調(diào)整為內(nèi)容尺寸”。

步驟4圖

步驟5：在“內(nèi)部框架”頁面再拖入一個(gè)“內(nèi)部框架”，也就是在index的state1頁面拖入一個(gè)“內(nèi)部框架”組件，將這個(gè)組件轉(zhuǎn)換成動態(tài)面板(將默認(rèn)狀態(tài)修改為state2)，要注意的是設(shè)置大小，一定要注意滾動條要超過index的state1頁面的顯示范圍，這樣能夠避免在頁面中顯示出滾動條。

步驟5圖

步驟6：設(shè)置剛剛插入的第二個(gè)“內(nèi)部框架組件”動態(tài)面板，取消state1頁面中的滾動條和邊框的顯示，取消勾選“自動調(diào)整為內(nèi)容尺寸”，在state1動態(tài)面板下修改剛剛插入的第二個(gè)“內(nèi)部框架組件”動態(tài)面板上右鍵，選擇“自動顯示垂直滾動條”。

步驟6圖

步驟7：在state2頁面中拖入一個(gè)長圖片或者加入長文本，點(diǎn)擊F5就能看到效果了。

步驟7圖

8.更多：可以設(shè)置上下邊界，不顯示滾動條，可以完全模擬出鼠標(biāo)滑輪滾動效果，可以嘗試下用下別的組件。

效果預(yù)覽：https://o9qpvp.axshare.com

本文由 @虛偽的溫柔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自PEXELS，基于CC0協(xié)議