起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure8教程：網頁orApp鼠標滾動效果
網頁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協議
哈，看完還是不太會？你可能需要從Axure基礎開始學
?? 這里推薦你加Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：大禮包
領取適合產品新人的原型設計大禮包哦，cc還會不定期分享Axure免費視頻課程呢！
這個要支持一下，確實很好的思路
能不能做到既支持網頁端的滾動，又支持手機端的拖動？
這樣是真的麻煩
其實動態面板就能做到了
表示沒有看懂
在需要滾動的地方放一個內聯框架，然后新建一個頁面，將需要滾動的內容放入該頁面，回到內聯框架那個頁面->點擊內聯框架->選擇框架目標（就是放內容那個頁面），就可以實現滾動惹~
方法可行，能實現滾動效果，我這個和你說的還是有區別的，我這個是在滾動的基礎上隱藏了內聯框架的滾動條，你那個方法隱藏內聯框架的滾動條后，就沒有滾動效果了，我用的是Axure8.0
我一般是選擇自動顯示或隱藏滾動條 隱藏邊框 然后用背景色蓋住滾動條就可以又隱藏又滾動了哈哈哈
0.0
這樣好簡單啊
哈哈哈哈哈哈哈哈，機智