Geek Answers Handbook

Javascript scroll effect 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 an angularjs controller, which works fine. but I need, when I press the left or right arrow showing the start and end files, my intention is to show that the file is screen dependent, for example for 5s 3 files, for 6 files from 4. I tried change javascript stuck badly to fix scrolling issues. Anyone can help me fix this problem.

Output scroller

+5
source share
1 answer

I made small changes to HTML and CSS, and scrolling works (touch) perfectly.

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

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

+1
source

More articles:


All Articles