Question

我希望之前有人见过这个问题，并且您可能有解决方案。

我有一个函数，在我的控制器加载时调用，它应该将一个HTML元素（碰巧是一个div元素）滚动到一个可滚动的包含div的顶部。页面的HTML位于用户导航到与其关联的路径时加载的视图中，并且要滚动到的div在ng-repeat中创建。

在加载控制器和视图后，当用户与页面交互时从单击功能调用时，滚动功能可以正常工作。功能是：

// scrolls the specified html element into view
function scrollToElementByID(id) {
    // locate the html element to scroll to
    var 
        elem = document.getElementById(question.divID);

    // found the element associated with the question - set focus on it
    if (elem) {
        // get the position of the top of the element
        var 
            topPos = elem.offsetTop;

        // get the div in which the element is located
        var 
            elemParent = elem.parentNode;

        // scroll the containing div to the element position
        elemParent.scrollTop = topPos;

    }
}

但是，当首次从控制器首次加载时调用的初始化函数调用时，该函数不起作用。 getElementById函数调用返回null，这似乎表明在调用时尚未创建html元素。

我已经尝试过使用$ viewContentLoaded事件，但是在滚动调用之前很久就会触发它并且它仍然失败，设置$ timeout和$ interval也不起作用。有人建议我在用户导航到路线时如何将可滚动的div滚动到指定的元素？

谢谢！

基于Fedaykin评论的更多信息：

我修改了你的控制器代码，试图证明我需要的东西。当用户在加载页面后与页面交互时，你的示例指令运行良好，就像你的plunkr一样，但我需要像这样自动发生滚动（参见标记为CHANGE的注释）：

app.controller( 'myCtrl', [ '$scope', '$routeParams', function ( $scope, $routeParams ){

  $scope.value = 'test';
  $scope.itemsOne = [];
  $scope.itemsTwo = [];

  for(var i=0; i<10; i++){
    $scope.itemsOne.push(makeSentence());
    $scope.itemsTwo.push(makeSentence());
  }

  // CHANGE: get the row and column from query string params
  var
    row = $routeParams.r,
    col = $routeParams.c;

// CHANGE: controller initialization function - called when controller loads
function init() {
    // scroll to requested row in requested column
    $scope.scrollToMe(row, col);
}

// CHANGE: call controller initialization
init();

  function makeSentence() {
    var text = ""; 
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

    for( var i=0; i < Math.random() * 200; i++ ){
      for( var i=0; i < Math.random() * possible.length; i++ )
          text += possible.charAt(Math.floor(Math.random() * possible.length));
      text += " ";
    }
    //console.log(text);
    return text;
  }

  $scope.scrollMeTo = function(column, row){
    // scroll me to an area in a column
    if(column == 1)
      $scope.itemColumn1 = row;

    if(column == 2)
      $scope.itemColumn2 = row;
  };

}] );

感谢您的帮助！

从AngularJS控制器滚动到可滚动DIV中的HTML元素

0 个答案: