How to scroll a div to left using AngularJS

Question

I have a div like below:

<div class="col-xs-1 scroll-button"><i class="glyphicon glyphicon-chevron-left"></i> </div>
<div class="customer-ust-bant col-xs-22" id="letters">
    <box ng-repeat="lt in alph" name="{{lt}}" id="{{lt}}"></box>
</div>
<div class="col-xs-1 scroll-button" ng-click="gotoBottom()"><i class="glyphicon glyphicon-chevron-right"></i> </div>

and box template:

<div class="alphabet-kutu">{{name|uppercase}}</div>

and the directive:

app.directive("box", function() {
return {
    restrict:"E",
    scope:{
        name:"@"
    },
    templateUrl:"/static/templates/customers/box.html",
    link:function(scope,elem,attrs,ctrl) {

    }
  };
})

As you see I have div containing letters in alphabet and styled in horizontal scroll.

When a button is clicked i want to scroll this div to left.

 $scope.gotoBottom = function (){
var element = angular.element( document.querySelector( '#letters' ) );
    element.animate({scrollLeft: element.offset().left}, "slow");
    //element.scrollLeft(100);

};

I tried animate and scrollLeft functions. But I did not do any good. Is there a special function in AngularJS for this situations? How do I scroll a div to left using jQuery?

Do you need to scroll the content inside the box or move the box to the left? — jcubic
– jcubic, Commented Apr 11, 2014 at 16:15
@Blazemonger if he include jQuery, element will be jQuery object. — jcubic
– jcubic, Commented Apr 11, 2014 at 16:33

Hamdi Douss · Accepted Answer · 2016-02-25 09:29:39Z

3

I think you should give another value to your scrollLeft. Because in the given code, you are trying to scroll the element to its current location, so it won't move. For example:

element.animate({scrollLeft: element.offset().left - 50}, "slow");

PS: Please ensure you have jQuery included. The subset of jQuery embedded in angularJS does not seem to support animate function

answered Feb 25, 2016 at 9:29

Hamdi Douss

1,1131 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to scroll a div to left using AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related