Question

使用jQuery很容易做到：

var msgs = $(".messages ul")

var scroll = false

if( msgs[0].scrollHeight  === (msgs.scrollTop() + msgs.outerHeight() ) )
{

    scroll = true

}
$scope.messages.push(data)
if(scroll)
{

    setTimeout(function(){

        msgs.scrollTop(msgs[0].scrollHeight) // Allow it to update!

    },0)


}

为了给出一些上下文，ul是消息的容器，我遍历$scope.messages中的数组，如果容器滚动到底部，它将坚持到底部。这个实现对我有用。

现在，我最近学会了如何在角度中使用jQuery。但我想知道，我如何在纯AngularJS中实现这样的目标？

Answer 1

您可以创建一个指令，该指令将具有一个变量，当该值变为true时将变为顶部，并且一旦不在顶部就将其自身设置为false。

使用方法：

 <div scroll-to-top="isAtTop">
   <li ng-repeat="stuff in items">{{stuff}}
   <a ng-click="isAtTop = true">Scroll to Top</a>
 </div>

这是一个指令（没有测试，但应该有效）：

angular.module('myApp').directive('scrollToTop', function() {
  return {
    restrict: 'A',
    link: function(scope, elm, attr) {
      var isTop;
      //bind changes from scope to our view: set isTop variable
      //depending on what scope variable is. If scope value
      //changes to true and we aren't at top, go to top
      scope.$watch(attr.scrollToTop, function(newValue) {
        newValue = !!newValue; //to boolean
        if (!isTop && newValue) {
          elm[0].scrollTo(0,0);
        }
        isTop = newValue; 
      });

      //If we are at top and we scroll down, set isTop and 
      //our variable on scope to false.
      elm.bind('scroll', function() {
        if (elm[0].scrollTop !==0 && isTop) {
          //Use $apply to tell angular 
          //'hey, we are gonna change something from outside angular'
          scope.$apply(function() {
            //(we should use $parse service here, but simple for example)
            scope[attr.scrollTop] = false;
            isTop = false;
          });
        }
      });

    }
  };
});

Answer 2

我遇到了与表体滚动相同的问题。我已经按照以下方式解决了这个问题。

这是我的示例html。

<table id="rateplanmapping-scroll">
    <thead>
       <th></th>....
    </thead>
    <tbody >
        <tr ng-repeat="data in datas"> //this is the data
            <td></td>.....
        </tr>
    </tbody>
</table>

这是滚动到顶部的角度代码

angular.element("#rateplanmapping-scroll tbody")[0].scrollTop=0;

我希望它有所帮助。您可以将此脚本放在所需的函数中，因此，当特定事情发生时，它会自动触发。要么也可以附加到活动。我希望它有所帮助。

对于div元素，可以按照以下方式完成

http://plnkr.co/edit/0B4zrFTho6GYuPAS0S1A?p=preview

Answer 3

这也是工作$anchorScroll。实施例

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table class="table table-hover table-bordered" id="mydata">
                        <thead class="colorBlue">
                            <tr>
                                <th>S.NO</th>
                                <th>ROLE NAME</th>
                                <th>ACTION</th>
                            </tr>
                        </thead>
                        <tbody id="content"></tbody>
                    </table>

JS： -

<div ng-controller="ScrollController">
  <a ng-click="gotoBottom()">Go to bottom</a>
  <a id="bottom"></a> You're at the bottom!
</div>

Answer 4

我见过的最简单的解决方案：

$location.hash('focus');

//调用$ anchorScroll（） $ anchorScroll（）;

如何在angularjs中滚动div

4 个答案: