AngularJS如何将元素滚动到视图中心

Question

AngularJS如何将元素滚动到视图中心

javascriptangularjsscroll

3

我有一个很宽的div，里面有很多元素。当我按下一个按钮时，我想让它出现在视野中。$anchorscroll似乎不能按照这种方式工作，是否有其他东西可以使用？

有一些用于水平滚动到元素的东西。

- suman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shashank Agrawal · Accepted Answer

这里是您要的：

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>

您可以将其包装为指令，使代码更加通用。