手寫橫向滾動條與時間軸

前提：今天在做頁面的時候，有個頁面原型是一條時間軸，而且橫向展示，不可以換行，超出時候不用瀏覽器自帶的overflow:auto所產生的滾動條，而是需要類似輪播圖的左右按鈕一樣，實現時間軸的橫向滾動。

ps:下面的代碼用到了jquery和angular。

/* css樣式部分 */
<style>
    .risk-report {
        padding: 10px;
        background: #fff;
    }
    /* 圈線 */
    .risk-report .slider-box {
        display: inline-block;
    }

    .risk-report .slider-box .circle {
        width: 8px;
        height: 8px;
        float: left;
        border: 2px solid #ddd;
        border-radius: 50%;
        box-sizing: border-box;
    }

    .risk-report .slider-box .line {
        width: 200px;
        height: 2px;
        float: left;
        background: #ddd;
        position: relative;
        top: 3px;
    }

    .risk-report .slider-box .active.circle {
        border-color: #4686F2;
    }

    .risk-report .slider-box .active.line {
        background: #4686F2;
    }

    /* 時間軸 */
    .risk-report .time-axis-wrap {
        position: relative;
    }

    .risk-report .time-axis-content {
        white-space: nowrap;
        overflow: hidden;
        /* 去除inline-block的間隙 */
        font-size: 0;
        -webkit-text-size-adjust: none;
    }

    .risk-report .time-axis-content .time-axis-item {
        display: inline-block;
        font-size: 12px;
        color: #333333;
        text-align: left;
        line-height: 20px;
        font-family: PingFangSC-Medium;
        white-space: normal;
        width: 208px;
        vertical-align: top;
        overflow: hidden;
    }

    .risk-report .time-axis-content .time-axis-item .time-axis-item-time {
        font-family: PingFangSC-Regular;
        padding-right: 10px;
    }

    .risk-report .time-axis-wrap .scroll-btn {
        width: 30px;
        height: 30px;
        background: #DDDDDD;
        color: #fff;
        line-height: 30px;
        text-align: center;
        font-size: 20px;
        border-radius: 4px;
        position: absolute;
        /* top: 7px; */
        top: 50%;
        margin-top: -15px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        display: none;
    }

    .risk-report .time-axis-wrap:hover .scroll-btn {
        display: block;
    }

    .risk-report .time-axis-wrap .scroll-btn.left-scroll-btn {
        left: 0;
    }

    .risk-report .time-axis-wrap .scroll-btn.right-scroll-btn {
        right: 0;
    }

    .risk-report .time-axis-wrap .scroll-btn:hover {
        background: #aaa;
        cursor: pointer;
    }
</style>

 

<!--  html部分 -->
<div class="risk-report" ng-controller="riskReportController">
    <div class="time-axis-wrap">
        <div class="time-axis-content">
            <div class="time-axis-item" ng-repeat="item in timeAxisData track by $index">
                <div class="time-axis-item-time">{{item.time}}</div>
                <div class="slider-box">
                    <div class="circle"></div>
                    <div class="line" ng-show="{{$index !== timeAxisData.length-1}}"></div>
                </div>
                <div class="time-axis-item-tip" style="padding-right:10px;">{{item.tip}}</div>
                <div class="time-axis-item-status" style="padding-right:10px;">{{item.status}}</div>
            </div>
        </div>
        <div class="left-scroll-btn scroll-btn" ng-click="leftScroll()">< </div>
        <div class="right-scroll-btn scroll-btn" ng-click="rightScroll()">></div>
    </div>

</div>

js部分
 // 時間軸的數據
$scope.timeAxisData = [
  　　　　　　　　　　{
                        time: "1-20170101",
                        tip: "預警后，回訪確認",
                        status: "無危險"
                    },
                    {
                        time: "2-20180101",
                        tip: "預警后，回訪確認",
                        status: "無危險"
                    },
                    {
                        time: "3-20170101",
                        tip: "預警后，回訪確認",
                        status: "無危險"
                    },
                    {
                        time: "4-20170101",
                        tip: "預警后，回訪確認",
                        status: "無危險"
                    },
                    {
                        time: "至今",
                        tip: "",
                        status: ""
                    }
                ];
　　　　　　　$scope.scrollLeft = 0;// 時間軸初始左側滾動距離
　　　　　　　// 左移
            $scope.leftScroll = function () {
                if ($scope.scrollLeft <= 0) {
                    $scope.scrollLeft = 0;
                    return;
                }
                var timeAxisContentScrollWidth = document.querySelector(".time-axis-content").scrollWidth;
                var timeAxisContentOffsetWidth = document.querySelector(".time-axis-content").offsetWidth;
                var dHeight = timeAxisContentScrollWidth - timeAxisContentOffsetWidth;
                if ($scope.scrollLeft > dHeight) {
                    $scope.scrollLeft = dHeight;
                }
                // 每次減少100
                $scope.scrollLeft -= 100;
                $(".time-axis-content").scrollLeft($scope.scrollLeft);
            };
            // 右移
            $scope.rightScroll = function () {
                var timeAxisContentScrollWidth = document.querySelector(".time-axis-content").scrollWidth;
                var timeAxisContentOffsetWidth = document.querySelector(".time-axis-content").offsetWidth;
                var dHeight = timeAxisContentScrollWidth - timeAxisContentOffsetWidth;
                if ($scope.scrollLeft > dHeight) {
                    $scope.scrollLeft = dHeight;
                    return;
                }
                if ($scope.scrollLeft <= 0) {
                    $scope.scrollLeft = 0;
                }
                // 每次減少100
                $scope.scrollLeft += 100;
                $(".time-axis-content").scrollLeft($scope.scrollLeft);
            };