CODEWITHSUNDEEP
javascriptangularjsscroll
suman
suman

Reputation: 195

AngularJS get element into view

I have a very wide div with a lot of elements. When I press a button, I want it to come into view? $anchorscroll doesn't seem to work this way is there anything I can use?

Something for horizontal scrolling to an element

Upvotes: 3

Views: 338

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

Here you go:

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {

  $scope.scrollH = function() {
    var parent = document.querySelector("#parent");
    var focusable = document.querySelector("#focusme");

    var parentLeft = parent.getBoundingClientRect().left;
    var focusableLeft = focusable.getBoundingClientRect().left;

    parent.scrollLeft = focusableLeft - parentLeft;
  };
});
#parent {
  width: 300px;
  background: #ccc;
  overflow: auto;
}
#child {
  width: 1200px
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div ng-app="sa" ng-controller="FooController">
  <div id="parent">
    <div id="child">
      Etiam feugiat lorem non metus. Sed cursus turpis vitae tortor. Vestibulum volutpat, euismod vitae, posuere imperdiet, leo. Sed libero. <strong id="focusme">I need to be scroll horizontally.</strong>
    </div>
  </div>
  <a href="#" ng-click="scrollH()">Scroll horizontally</a>
</div>

You can wrap it as a directive to make code common.

Upvotes: 1

Related Questions