CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
VijayRagavan
VijayRagavan

Reputation: 390

javascript scroll effect is not working in angularjs controller

HTML :

<div class="scroller-size">
    <div class="scroller scroller-left" style="padding-top: 25px;"><i class="glyphicon glyphicon-chevron-left"></i></div>
    <div class="scroller scroller-right" style="padding-top: 25px;"><i class="glyphicon glyphicon-chevron-right"></i></div>
    <div class="wrapper" style="height:73px;">
        <ul class="nav nav-tabs list" id="myTab">
                <li ng-repeat="pf in printlist"><img style="image-rendering: -webkit-optimize-contrast; image-rendering: optimizeQuality;" class="img-responsive pull-right" ng-src="{{pf.imagePath}}" ng-click="pf.selectFile = !pf.selectFile ;showCustom($event,pf)"></li>
        </ul>
    </div>
</div>

Javascript:

var hidWidth;
var scrollBarWidths = 20;

var widthOfList = function () {
    var itemsWidth = 0;
    $('.list li').each(function () {
        var itemWidth = $(this).outerWidth();
        itemsWidth += itemWidth;
    });
    return itemsWidth;
};

var widthOfHidden = function () {
    return (($('.wrapper').outerWidth()) - widthOfList() - getLeftPosi()) - scrollBarWidths;
};

var getLeftPosi = function () {
    return $('.list').position().left;
};

var reAdjust = function () {
    if (($('.wrapper').outerWidth()) < widthOfList()) {
        $('.scroller-right').show();
    } else {
        $('.scroller-right').hide();
    }

    if (getLeftPosi() < 0) {
        $('.scroller-left').show();
    } else {
        $('.item').animate({left: "-=" + getLeftPosi() + "px"}, 'slow');
        $('.scroller-left').hide();
    }
}

reAdjust();

$(window).on('resize', function (e) {
    reAdjust();
});

$(window).on('load', function (e) {
    reAdjust();
});

$('.scroller-right').click(function () {

    $('.scroller-left').fadeIn('slow');
    $('.scroller-right').fadeOut('slow');

    $('.list').animate({left: "+=" + widthOfHidden() + "px"}, 'slow', function () {

    });
});

$('.scroller-left').click(function () {

    $('.scroller-right').fadeIn('slow');
    $('.scroller-left').fadeOut('slow');

    $('.list').animate({left: "-=" + getLeftPosi() + "px"}, 'slow', function () {

    });
});

CSS:

.wrapper {
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  background-color: white;
  // Toggle this depending upon whether you want to see the scrollbar
  &::-webkit-scrollbar {
    display: none;
  }
}

.internal {
  display: inline;
}
.list {
  position:absolute;
  left:0px;
  top:0px;
  min-width:3000px;
  margin-left:12px;
  margin-top:0px;
}
.list li{
  display:table-cell;
  position:relative;
  text-align:center;
  cursor:grab;
  cursor:-webkit-grab;
  color:#efefef;
  vertical-align:middle;
}
.scroller {
  text-align:center;
  cursor:pointer;
  display:none;
  padding:7px;
  padding-top:11px;
  white-space: no-wrap;
  vertical-align:middle;
  background-color:#fff;
}
.scroller-right{
  float:right;
}
.scroller-left {
  float:left;
}
.scroller-size {
  height: auto;
  margin-top: 1%;
}
.nav-tabs {
  border-bottom: 0px solid transparent !important;
}

I used this code in angularjs controller it's working fine. but i need when i click the left or right arrow it showing start and end files my intention is it must show the file depends on the screen for example like for 5s 3 files ,for 6s 4 files.I tried to change the JavaScript stucking badly to fix the scroll issue.anyone can help me to fix this issue

Output Scroller

Upvotes: 5

Views: 239

Answers (1)

Gopi Krishnan
Gopi Krishnan

Reputation: 104

I did the minor changes in HTML and CSS and the scroll is working(touch) fine.

HTML:

 <div class="scroller-size">
      <div class="wrapper">
          <div class="internal"><img class="" ng-src="img/sample1.png></div>
          <div class="internal"><img class="" ng-src="img/sample1.png"></div>
          <div class="internal"><img class="" ng-src="img/sample1.png"></div>
          <div class="internal"><img class="" ng-src="img/sample1.png"></div>
          <div class="internal"><img class="" ng-src="img/sample1.png"></div>
          <div class="internal"><img class="" ng-src="img/sample1.png"></div>
       </div>
 </div>

CSS:

.wrapper {
  width: 100%;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 1rem;
  background-color: white;
  // Toggle this depending upon whether you want to see the scrollbar
  &::-webkit-scrollbar {
    display: none;
  }
}

.internal {
  display: inline;
}

Reference Link: https://benfrain.com/horizontal-scrolling-area-css-overflow-ios/

Upvotes: 1

Related Questions