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控制器中使用了这个代码，它运行正常。但我需要当我点击向左或向右箭头它显示开始和结束文件我的意图是它必须显示文件取决于屏幕例如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/

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

1 个答案: