javascript滚动效果在angularjs控制器中不起作用答案

【问题标题】：javascript scroll effect is not working in angularjs controllerjavascript滚动效果在angularjs控制器中不起作用
【发布时间】：2016-12-31 21:52:00
【问题描述】：

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 控制器中使用了这段代码，它工作正常。但是我需要当我单击向左或向右箭头时它显示开始和结束文件我的意图是它必须显示文件取决于屏幕，例如对于 5s 3 个文件，对于 6s 4 个文件。我试图改变 JavaScript 卡住了修复滚动问题。任何人都可以帮我解决这个问题

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案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/

【讨论】：