手写横向滚动条与时间轴

前提：今天在做页面的时候，有个页面原型是一条时间轴，而且横向展示，不可以换行，超出时候不用浏览器自带的overflow:auto所产生的滚动条，而是需要类似轮播图的左右按钮一样，实现时间轴的横向滚动。

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

/* css样式部分 */

 

<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 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);
            };