Я пытаюсь построить компонент шага с помощью кнопки со стрелкой для прокрутки влево и вправо с помощью Bulma, angularjs, jquery. Мое требование:
- внутри видимой части компонента будут видны только пять элементов.
- Как только элемент перемещается в левой стрелке, он исчезает.
- Как только элемент перемещается влево, он исчезает.
- Как только элемент перемещается в стрелке вправо, он исчезает.
- Как только элемент выходит стрелка вправо исчезает.
- Кроме того, то же самое с прокруткой мыши
https://codepen.io/singhrhi/pen/ZEYNWQM
;'use strict';
angular.module("app.fcrs")
.controller("ProjectProgressWorkflowViewController", ["$scope",function($scope) {
angular.extend($scope, {
test: function() {
// console.log("TEEEST");
},
test1: function(){
// console.dir($('.left-paddle').position().left);
// $('.menu').animate({"scrollLeft": '+=190px'}, 300 );
$('.menu').animate({"scrollLeft": '+=200px'}, 300 );
// $('.menu').on('scroll', function() {
// // console.log($(this))
// // console.log($(this.children[0]))
// $scope.oscrl($(this.children));
// });
},
test2: function(){
// console.dir($('.right-paddle').position().left);
$('.menu').animate({"scrollLeft": '-=200px'}, 300 );
// $('.menu').on('scroll', function() {
// // console.log($(this.children))
// $scope.oscrl($(this.children));
// });
}
});
}]);
@media screen and (min-width: 769px), print{
.steps.is-small:not(.is-vertical) .steps-segment:not(:last-child):after {
height: .16em;
}
}
.steps.is-hollow .steps-marker, .steps-marker.is-hollow {
border: .2em solid #23d160;
}
.steps-marker{
margin-right: 11rem;
}
.TeSEST{
background: #23d160;
width:90px;
position: absolute;
top: 1px;
}
.TeST{
background: repeating-linear-gradient(90deg, #dbdbdb, #dbdbdb 10px, transparent 10px, transparent 20px);
width:84px;
position: absolute;
right:0px;
top:2px;
}
@media screen and (min-width: 769px), print {
.steps.is-small:not(.is-vertical).has-content-centered .steps-segment:not(:last-child):after {
left: 55%;
right: -45%;
}
}
.menu-wrapper {
padding:4px;
position: relative;
max-width: 1100px;
height: 100px; // hide the scroll bar
margin: 9em;
overflow-x: hidden;
overflow-y: hidden;
}
.menu{
height: 120px; // hide the scroll bar
box-sizing: border-box;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
opacity:1;
}
.paddles {
}
.paddle {
z-index: 10;
position: absolute;
top: 0;
bottom: 0;
width: 3em;
}
.left-paddle {
left: 0em;
}
.right-paddle {
right: 0em;
}
.hidden {
display: none;
}
<div ng-controller="ProjectProgressWorkflowViewController">
<div class="menu-wrapper">
<ul class="steps is-small has-content-centered menu">
<li class="steps-segment item" id="dd">
<hr class="TeSEST"></hr>
<a href="#" class="steps-marker has-text-weight-normal" id="ddd">
1
</a>
<div class="steps-content" style="width:16em">
<div>Project</div>
<div>Establishment</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal">2</a>
<div class="steps-content" style="width:16em">
<div>Functional Design</div>
<div>&</div>
<div>Master Planning</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">3</a>
<div class="steps-content" style="width:16em">
<div>Concept Design</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">4</a>
<div class="steps-content" style="width:16em">
<div>Schematic Design</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">5</a>
<div class="steps-content" style="width:16em">
<div>Detailed Design</div>
<div>&</div>
<div>Documentation</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">6</a>
<div class="steps-content" style="width:16em">
<div>Construction</div>
<div>&</div>
<div>Completion</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">7</a>
<div class="steps-content" style="width:16em">
<div>Commissioning</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">8</a>
<div class="steps-content" style="width:16em">
<div>Construction</div>
<div>Certification</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker has-text-weight-normal ">9</a>
<div class="steps-content" style="width:16em">
<div>Handover</div>
</div>
</li>
<li id="hey" class="steps-segment is-active is-dashed item">
<a href="#" class="steps-marker is-hollow has-text-weight-normal has-text-success ">10</a>
<div class="steps-content" style="width:16em">
<div>Post Construction </div>
<div>& </div>
<div>Post Occupation </div>
<div>Evaluation</div>
</div>
</li>
<li class="steps-segment item">
<a href="#" class="steps-marker is-hollow has-text-weight-normal has-text-grey-light ">11</a>
<div class="steps-content" style="width:16em">
<div>Financial </div>
<div>Completion</div>
</div>
<hr class="TeST"></hr>
</li>
</ul>
<button class="button is-rounded left-paddle paddle" ng-click="test1()">
<div class="step-scroller-text"><<div>
</button>
<button class="button is-rounded right-paddle paddle" ng-click="test2()">
<div class="step-scroller-text">><div>
</button>
</div>
</div>
Я могу прокручивать элементы кнопками. Однако не в состоянии достичь затухания в эффектах затухания. Пожалуйста помоги. Спасибо !!