做一個自定義滾動條
關於滾動條，大家知道有一些部件可以設定自帶的滾動條，來達到滾動的效果，比如動態面板。但是系統自帶的滾動條有一個通病：不太好看並且不能修改樣式。那我們怎麼做好看的滾動條呢？需要我們去做設定。
先看一下動態面板做出來的滾動條是怎樣的。
自帶的這種滾動條有時會不符合我們的要求。那麼就需要做出改動。以動態面板為例，我們一起來看看怎麼來處理這個滾動條吧。
如果滾動條是不需要顯示出來的話，只需要把動態面板的寬度加寬至滾動條不遮擋頁面內容的程度，然後把滾動條用部件或者是其他圖片遮擋住，從視覺上造成沒有滾動條的效果。這種處理方法比較簡單粗暴。
那如果要的是不同樣式的滾動條呢？可以怎麼做？
原來的滾動條像上面一樣，將它遮蓋起來。因為它是不可避免的，因為有滾動條，才能進行滾動。然後我們再去做一個符合自己需要的滾動條。
這時候的做法是，在動態面板滾動的時候，移動滾動條，讓滾動條隨著動態面板滾動而移動。那這我們要確定的是，動態面板從頂部到底部總共滾動的距離是多少，滾動條總共移動的距離是多少。
從這個案例裡面可以看到，動態面板的滾動總距離是2073，滾動條的移動總距離是527。那麼就可以來計算它們之間的比例關係了。假設，動態面板滾動了1的距離，滾動條要移動多少距離呢？就是527/2073。也就是原來的位置的基礎上，再移動527/2073的距離。
得出了這個比例關係之後，就要讓滾動條隨動態面板滾動了。動態面板的滾動距離我們可以用scrollY函式直接來獲取。根據我們上面得到的比例關係，就可以得出滾動條移動到什麼位置了。
來看一下案例效果是怎樣的。
這個案例的這種做法其實是不難的，要注意的是動態面板和滾動條之間的關係，這個關係明白之後，很簡單就能做出來了。
在這個基礎上，還能把滾動條做得更完善一點，大家如果有什麼想法，或者想要知道的效果，都可以聯絡我們，一起共同進步！
（加微信：pexuepexue，小編邀請您進入全國產品經理交流群）
群內每日分享學習資料、重磅報告、面試問題、招聘資訊、免費課程
更多精品文章檢視：http://axure.pexue.com/PeiXue/Default.aspx
