網頁orApp鼠標滾動效果在原型設計中如何實現，文章對此作出了分享。

前些天要做一個高保真的email應用原型，在做滑動顯示郵件列表的時候發現自用各種事件都滿足不了，網上也沒有一個比較規范的教程，自己特意整理了一下，在做網頁或者app時能模仿出鼠標滾動效果，注意是滾動，不是點擊拖動。

步驟1：將“內部框架組件”組件拖拽到“index”頁面，設置好坐標和大小。

步驟1圖

步驟2：將“內部框架組件”組件轉換成動態面板，默認狀態為state1并取消勾選“自動調整為內容尺寸”。

步驟2圖

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

步驟3圖

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

步驟4圖

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

步驟5圖

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

步驟6圖

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

步驟7圖

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

效果預覽：https://o9qpvp.axshare.com

本文由 @虛偽的溫柔 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基于CC0協議