起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：如何自制橫向滾動條？
本文為我們介紹了自制橫向滾動條的三個步驟，以及其中的注意要點。更多詳細內容請見正文~
一般如果我們需要使用橫向滾動條，會直接使用動態面板提供的橫向滾動條。由于橫向滾動條在動態面板的最底部，這就有個前提，就是動態面板必須全部展示在可視范圍內，橫向滾動條才可以使用。那當動態面板提供的橫向滾動條無法使用時，我們如何自制一個橫向滾動條？
比如當我們實現如下的效果時，由于表格左側固定，當表格數據過多時，無法使用表格的內滾動達到想要的效果，這個時候就需要自制一個橫向滾動條。
自制橫向滾動條，主要分為三步：
- 創建需要滾動的動態面板（即此處示例的表格）
- 自制橫向滾動條
- 通過拖拽滾動條，移動動態面板中的內容
一、創建動態面板（即此處示例的表格）
1. 創建「表格內容」(由于后面需整體控制表格內容的移動，可將表格內容轉為動態面板或群組)。
2. 將表格內容轉為動態面板「表格」，且使用橫向滾動條，并將動態面板本身提供的滾動條隱藏掉。
（可將 此動態面板再轉為動態面板，然后通過將滾動條顯示在最外層動態面板的外面，實現滾動條的隱藏）
二、自制橫向滾動條
1. 創建「橫向滾動條」
2. 現實中，滾動條的大小不是固定的，是根據表格內容 動態 計算的。
首先我們需要知道滾動條的寬度計算方式，如下圖：
當加載滾動條時，可根據此公式設置寬度：
3. 將「橫向滾動條」轉為動態面板「滾動條」，以便實現滾動條的拖拽。
4. 設置「滾動條」的拖拽
(1)創建「滾動條背景」，寬度為「滾動條」的可拖拽范圍。
(2)「滾動條」拖拽時，左側限制為背景的X坐標，右側為背景的X坐標加背景的寬。
三、拖拽滾動條時，移動表格內容
我們發現往右拖拽滾動條時，表格內容會往左走，所以二者為相反數。
具體公式如下：
則拖動滾動條時，表格內容的X坐標設置如下：
至此，通過以上三步，一個自制的橫向滾動條已基本實現。
由于示例中牽扯的元件過多，大家可通過下載源文件查看具體的實現方法。另外，此案例同時示例了，「當表格滾動時，如何將表格的表頭吸附到頂部」，有需要的小伙伴可進行參考。
文件地址：https://pan.baidu.com/s/10qSilLkkbzDT54eaWbPNRQ
本文由 @冬瓜一號 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pixabay，基于 CC0 協議
產品小白沒看懂復雜的交互設計，想從基礎開始學，卻無從下手？
?? 可以找Axure實戰班的助教小可愛@CC-起點學院（微信：qidiancc520），回復關鍵詞：禮物
領取原型設計大禮包，還有不定期的Axure免費視頻課程分享，老師在線答疑，多學多看多思考，你也能成為Axure原型設計大牛哦~