javascript滚动效果在angularjs Controller 中不起作用

Question

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

我在 angularjs Controller 中使用了这段代码，它工作正常。但我需要当我单击向左或向右箭头时它显示开始和结束文件我的意图是它必须显示文件取决于屏幕例如 5s 3 个文件，6s 4 个文件。我试图改变 JavaScript 卡住严重解决滚动问题。任何人都可以帮我解决这个问题

Answer 1

我对 HTML 和 CSS 做了一些小改动，滚动效果很好(触摸)。

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

引用链接:https://benfrain.com/horizontal-scrolling-area-css-overflow-ios/