本文主要分享一個運用Axure制作移動端內容滾動區的過程，與大家分享，希望有所啟發。

制作一個簡單的移動端內容滾動區，兩個動態面板就夠了！

1、材料的準備

（1）滾動區域：從元件庫中的基本元件中拖入一個動態面板到線框圖面板中，將其命名為“rolling_area”，這是滾動區的意思，表示網頁內容的滾動范圍，設置width=360，height=600。

（2）內容區域：雙擊“rolling_area”動態面板，進入“State1”。繼續向線框圖面板中拖入一個動態面板，將其命名為“content_area”,這是內容區的意思，設置width=360，height=800，表示所要瀏覽的內容有800高度。

（3）具體內容：雙擊“content_area”動態面板，進入“State1”編輯內容。在這里我用高度為800的填充了不同色塊的矩形來表示具體內容。畫這個矩形以及設置“content_area”的高度為800都是為了后面預覽時可以看出滾動的效果。

2、設置交互

（1）首先，要實現縱向滑動屏幕可以瀏覽內容的效果。點擊“content_area”動態面板，在右側的交互設置里面選擇“拖動時”，然后選擇移動“content_area”，并且設置為“垂直移動”，如下圖設置后，點擊“確定”。

現在，我們可以先按F5鍵預覽一下。這時，你可以體驗到鼠標拖動滾動區內的色塊矩形時，內容會上下垂直移動了。但有個問題，就是內容會無限地上下移動，而不像我們平時使用手機瀏覽頁面，當拖動頁面到頂部或者底部沒有內容時會被彈回來。那么這時，我們則需要通過控制“content_area”y值的范圍來控制具體內容移動的區域。

（1）點擊“content_area”，選擇“拖動結束時”，編輯用例1，設置條件如下圖，作用是當“content_area”移動到y值大于0時可以被彈回來。

（2）還是選擇“拖動結束時”，添加用例2，設置條件：當This（當前元件，也就是指“content_area”動態面板）的y值小于某個值時，“content_area”會被移動到這個值的位置。這一用例實現的效果就是：當滑動內容到屏幕最底部無內容時，無法再繼續滑動下去。那么這個值是多少呢？這個值就是當“content_area”的底部和“rolling_area”的底部重疊時“content_area”的y值，稍微思考一下，這個值就是“rolling_area”的高度減去“content_area”的高度，用公式表示就是“rolling_area.height-content_area.height”，但是由于我們當前是在“rolling_area”的“State1”狀態，無法直接操作到元件“rolling_area”，所以我們只能通過插入局部變量來操作到“rolling_area”，于是如下圖，插入局部變量LVAR1（表示元件“rolling_area”）。

然后再來設置當“content_area”的y值<某個值（LVAR1.height-This.height）時，移動“content_area”到這個“某個值”（LVAR1.height-This.height）。

到此，我們按F5鍵預覽，用鼠標拖動色塊矩形，就可以體驗到平日里在手機上瀏覽頁面的效果啦！

這是一個通用的滾動區，我們可以通過改變滾動區（rolling_area）的高度或者寬度來控制網頁內容的滾動范圍。

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