UIScrollView有自己預設的滾動條，可設定隱藏和顯示，但是有時候這個預設的滾動條沒辦法滿足我們的需求，那這時候只能通過自定義來實現了。 實現自定義滾動條需要解決的主要問題是：

在scrollview滾動的過程中如何改變滾動條的位置，進而確保滾動條和scrollView在相同時間內走完自己的位移，只要把這個問題解決好了，那我們就可以優雅的自定義滾動條了。

那如何解決這個滾動條的當前滾動位移呢？我們知道，UIScrollView有一個滾動範圍，滾動條也有一個滾動範圍，也就是說兩者的最大的滾動位移是固定的，那要想兩者在相同時間內走完自己的位移，只需要確保兩者的當前滾動位移和總位移之比一致就行。也就是說：

scrollView的當前位移/scrollView的總位移=滾動條的當前位移/滾動條的總位移

得到這個關係後，想要知道滾動條的當前位移，就不是什麼難事了。我們可以通過UIScrollView的代理方法獲取scrollview的當前滾動位移，scrollview的總位移和滾動條的總位移是固定的，那顯然我們可以方便的得出滾動條的當前位移，這樣，得到了滾動條的當前位移，我們就可以通過改變滾動條的frame，進而實現讓滾動條跟隨scrollview滾動。

但是這裡需要注意一點，因為這個位移是相對位移，所以在修改滾動條的frame時，要記得加上滾動條距離相對的參考系的左邊距離，這樣才是其真正的位移。比如現在滾動條的x是從螢幕左邊15開始的，滾動條的滾動範圍是螢幕寬度減去30，那麼當你以螢幕寬度減去30這個數值作為滾動條的滾動總位移，進而算出滾動條的當前位移時，需要加上距離左邊的15才是滾動條真正的位移。

接下來看一下程式碼的具體實現吧：
一、建立scrollview：(記得籤代理UIScrollViewDelegate)

-(UIScrollView *)scrollView{
    if (!_scrollView) {
        _scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 164, self.view.frame.size.width, 233)];
        _scrollView.delegate = self;
        _scrollView.scrollEnabled = YES;
 

        _scrollView.bounces = NO;
        _scrollView.showsHorizontalScrollIndicator=NO;
        _scrollView.layer.shadowColor = [UIColor redColor].CGColor;//shadowColor陰影顏色
        _scrollView.layer.shadowOffset = CGSizeMake(0,0);//shadowOffset陰影偏移,x向右偏移，y向下偏移
        _scrollView.layer.shadowOpacity = 0.5;//陰影透明度，預設0
        _scrollView.layer.shadowRadius = 3;//陰影半徑，預設3

    }
    return _scrollView;
}

二、建立自定義的滾動條以及在scrollview上加點內容：

-(void)loadView{
    [super loadView];
    [self.view addSubview:self.scrollView];

    slideBackView=[[UIView alloc] initWithFrame:CGRectMake(15, _scrollView.frame.origin.y+_scrollView.frame.size.height+20, self.view.frame.size.width-30, 8)];
    [self.view addSubview:slideBackView];
    slideBackView.backgroundColor = [UIColor colorWithRed:0.91 green:0.91 blue:0.91 alpha:1.00];
    slideBackView.layer.cornerRadius = 4;


    sliderView = [[UIView alloc] init];
    [self.view addSubview:sliderView];
    sliderView.frame=CGRectMake(slideBackView.frame.origin.x, slideBackView.frame.origin.y+(slideBackView.frame.size.height-7 )/2, 40 , 7 );
    sliderView.backgroundColor =[UIColor colorWithRed:0.12 green:0.72 blue:0.88 alpha:1.00];
    sliderView.layer.cornerRadius = 3.5;

 NSArray *[email protected][@"• 產品戰略規劃：市場目標、使用者目標、關鍵成功要素分析、管理和運用自己的資源來達成目標\n• 產品戰略實施：有損原則、平衡原則、聚焦原則\n• 產品需求文件：例項講解，牛逼的需求文件是怎麼誕生的\n• 主動：戰略思考、資源爭取\n• 推動：專案立項、迭代跟蹤\n• 溝通：上傳下達、思想一統\n• 平衡：各方協調、跨部溝通\n• 把控：管理得法、取捨有道",
                    @"• 使用者思維：具體案例解析\n• 運營思維：具體案例解析\n• 資料思維：具體案例解析\n• 產品經理的用研能力模型\n• 使用者研究基本概念解析\n• 用研基礎搭建及建設\n• 用研人員分工及工作職責細分"
                    @"• 常用使用者研究方法詳解\n• 桌面研究、定性研究、定量研究三種方法舉例講解及詳細步驟解析\n• 卡諾模型\n• 戰略級的市場及使用者研究\n• 以科學的方法在產品整個生命週期中進行“研究”",
                    @"• 品生命週期使用者研究側重點以及研究方法解讀\n• 產品用研規劃建立\n• 在產品不同生命週期，側重不同用研方法，更準確進行產品迭代",
                    @"• 格局：大格局思維，聚焦做實事\n• 決策：讓瑣碎的運營變有趣，“捨得”之道\n• owner精神：有狼性\n• 敏銳：“細節”出真知\n• 商業素養",
                    @"• 高情商：做個讓人感覺“舒適”的資深運營\n• 凝聚力：1+1>2，善用團隊用人所長，沒有完美的個人，只有優秀的團隊\n• 影響力：在網際網路領域成為運營專家，沉澱經驗，讓成功有跡可循\n• 知識傳承力：資深運營的價值，不是個人優秀，而是讓人人優秀。",
                    @"• 資料運營體系的構成\n• 資料規範與平臺\n• 資料運營體系結構\n• 資料資料平臺構建\n• 核心資料指標\n• 移動端產品資料埋點範例\n• 資料需求指標\n• 產品關鍵資料\n• 資料運營體系的構成",
                       ];

    NSInteger contentCount=textDesArr.count;
    for (NSInteger i = 0; i <contentCount; i++) {

            UILabel *textDesLabel=[[UILabel alloc] initWithFrame:CGRectMake(10+190 *i,0, 180 , 233 )];
            [_scrollView addSubview:textDesLabel];
            textDesLabel.textColor=[UIColor colorWithRed:0.49 green:0.49 blue:0.49 alpha:1.00];
            textDesLabel.font = [UIFont systemFontOfSize:12 ];
            textDesLabel.text = textDesArr[i];
            textDesLabel.numberOfLines = 0;
            textDesLabel.layer.borderWidth = 0.5;
            textDesLabel.layer.borderColor = [UIColor colorWithRed:0.91 green:0.91 blue:0.91 alpha:1.00].CGColor;
            textDesLabel.backgroundColor = [UIColor whiteColor];


    }

   //scrollView的滾動範圍
    _scrollView.contentSize = CGSizeMake(190*contentCount+10, 0);



}

三、在UIScrollView的代理滾動方法中修改滾動條的當前位移：

這裡是以自定義橫向滾動條為例，豎向滾動條也是一樣的原理。

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{


    [UIView animateWithDuration:0.5 animations:^{

        CGPoint offset =  scrollView.contentOffset;

        // scrollView的當前位移/scrollView的總位移=滑塊的當前位移/滑塊的總位移
        //        offset/(scrollView.contentSize.width-scrollView.frame.size.width)=滑塊的位移/(slideBackView.frame.size.width-sliderView.frame.size.width)
        //        滑塊距離螢幕左邊的距離加上滑塊的當前位移，即為滑塊當前的x

        CGRect frame=sliderView.frame;

        frame.origin.x=15 + offset.x*(slideBackView.frame.size.width-sliderView.frame.size.width)/(scrollView.contentSize.width-scrollView.frame.size.width);

        sliderView.frame = frame;



    }];
}

這樣，自定義的滾動條就實現了。效果如圖

另外，在這裡提一下陰影的使用方法，有時候我們需要加一些陰影效果，怎麼加呢？
主要用到layer的shadowColor（陰影顏色） 、shadowOffset （）陰影大小、hadowOpacity （陰影透明度）、shadowRadius（陰影圓角）這幾個屬性

如：

        _scrollView.layer.shadowColor = [UIColor redColor].CGColor;//shadowColor陰影顏色
        _scrollView.layer.shadowOffset = CGSizeMake(0,0);//shadowOffset陰影偏移,x向右偏移，y向下偏移
        _scrollView.layer.shadowOpacity = 0.5;//陰影透明度，預設0
        _scrollView.layer.shadowRadius = 3;//陰影半徑，預設3