$(function(){
    

    /**
     * 滚动的区域/总区域
     *      ||
     * 滚动条滚动的区域/总区域
     */
    var $barTip = $('#barTip');
    var $content = $('#hgc_content');
    var $scrollBar = $('#scrollBar');
    var totalArea = $('#hgc_content li').eq(0).find('span').length*150 - $content .width();
    var scrollArea = 0;
    var barArea = $scrollBar.width() - $barTip.width();
    
    $content.scroll(function(){
        scrollArea = $(this).scrollLeft();
        var scollLeft = (scrollArea/totalArea)*barArea;
        $barTip.css('left',scollLeft+'px')
    })
    //模拟滚动条
    var startLeft = 0;
    var isMove = false;
    var diff = 0;
    $barTip.mousedown(function(e){
        startLeft = e.pageX;
        isMove = true;
        diff = e.pageX - $barTip.offset().left;
        $(document).mouseup(function(e){
            startLeft = e.pageX;
            isMove = false;
        })
    })
    $(document).mousemove(function(e){
        var diffDistance = e.pageX-diff;
        var scollLeft = (diffDistance/barArea)*totalArea;
        if(
            !isMove || 
            diffDistance>=barArea || 
            diffDistance <= 0
        )return;
        $barTip.css('left',diffDistance+'px');
        $content.scrollLeft(scollLeft);
    })

    //document.body.onselectstart = function(){return false;}
    




})