javascript - AngularJS 获取元素进入 View

Question

我有一个非常宽的 div，其中包含很多元素。当我按下一个按钮时，我想让它进入视野吗？ $anchorscroll 似乎无法以这种方式工作，有什么我可以使用的吗？

水平滚动到元素的东西

Answer 1

给你:

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>

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