手写横向滚动条与时间轴
前提:今天在做页面的时候,有个页面原型是一条时间轴,而且横向展示,不可以换行,超出时候不用浏览器自带的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); };
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」