'Axure教程：如何自制橫向滾動條？'

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

二、自制橫向滾動條

1. 創建「橫向滾動條」

2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。

首先我們需要知道滾動條的寬度計算方式，如下圖：

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

二、自制橫向滾動條

1. 創建「橫向滾動條」

2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。

首先我們需要知道滾動條的寬度計算方式，如下圖：

當加載滾動條時，可根據此公式設置寬度：

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

二、自制橫向滾動條

1. 創建「橫向滾動條」

2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。

首先我們需要知道滾動條的寬度計算方式，如下圖：

當加載滾動條時，可根據此公式設置寬度：

3. 將「橫向滾動條」轉為動態面板「滾動條」，以便實現滾動條的拖拽。

4. 設置「滾動條」的拖拽

(1)創建「滾動條背景」，寬度為「滾動條」的可拖拽範圍。

(2)「滾動條」拖拽時，左側限制為背景的X座標，右側為背景的X座標加背景的寬。

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

二、自制橫向滾動條

1. 創建「橫向滾動條」

2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。

首先我們需要知道滾動條的寬度計算方式，如下圖：

當加載滾動條時，可根據此公式設置寬度：

3. 將「橫向滾動條」轉為動態面板「滾動條」，以便實現滾動條的拖拽。

4. 設置「滾動條」的拖拽

(1)創建「滾動條背景」，寬度為「滾動條」的可拖拽範圍。

(2)「滾動條」拖拽時，左側限制為背景的X座標，右側為背景的X座標加背景的寬。

三、拖拽滾動條時，移動表格內容

我們發現往右拖拽滾動條時，表格內容會往左走，所以二者為相反數。

具體公式如下：

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

二、自制橫向滾動條

1. 創建「橫向滾動條」

2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。

首先我們需要知道滾動條的寬度計算方式，如下圖：

當加載滾動條時，可根據此公式設置寬度：

3. 將「橫向滾動條」轉為動態面板「滾動條」，以便實現滾動條的拖拽。

4. 設置「滾動條」的拖拽

(1)創建「滾動條背景」，寬度為「滾動條」的可拖拽範圍。

(2)「滾動條」拖拽時，左側限制為背景的X座標，右側為背景的X座標加背景的寬。

三、拖拽滾動條時，移動表格內容

我們發現往右拖拽滾動條時，表格內容會往左走，所以二者為相反數。

具體公式如下：

則拖動滾動條時，表格內容的X座標設置如下：

本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~

一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由於橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視範圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？

比如當我們實現如下的效果時，由於表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。

自制橫向滾動條，主要分為三步：

1. 創建需要滾動的動態面板（即此處示例的表格）
2. 自制橫向滾動條
3. 通過拖拽滾動條，移動動態面板中的內容

一、創建動態面板（即此處示例的表格）

1. 創建「表格內容」(由於後面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。

2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，並將動態面板本身提供的滾動條隱藏掉。

（可將 此動態面板再轉為動態面板，然後通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）

二、自制橫向滾動條

1. 創建「橫向滾動條」

2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。

首先我們需要知道滾動條的寬度計算方式，如下圖：

當加載滾動條時，可根據此公式設置寬度：

3. 將「橫向滾動條」轉為動態面板「滾動條」，以便實現滾動條的拖拽。

4. 設置「滾動條」的拖拽

(1)創建「滾動條背景」，寬度為「滾動條」的可拖拽範圍。

(2)「滾動條」拖拽時，左側限制為背景的X座標，右側為背景的X座標加背景的寬。

三、拖拽滾動條時，移動表格內容

我們發現往右拖拽滾動條時，表格內容會往左走，所以二者為相反數。

具體公式如下：

則拖動滾動條時，表格內容的X座標設置如下：

至此，通過以上三步，一個自制的橫向滾動條已基本實現。

由於示例中牽扯的元件過多，大家可通過下載源文件查看具體的實現方法。另外，此案例同時示例了，「當表格滾動時，如何將表格的表頭吸附到頂部」，有需要的小夥伴可進行參考。

文件地址：https://pan.baidu.com/s/10qSilLkkbzDT54eaWbPNRQ

本文由 @冬瓜一號 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自 Pixabay，基於 CC0 協議