这很容易用 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如果容器滚动到底部，它将粘在底部。这个实现对我有用。
现在，我最近了解到一个人不应该在 Angular 中真正使用 jQuery。但我想知道，我如何在纯 AngularJS 中实现这样的目标？
您可以创建一个指令，该指令将具有一个变量，当它为 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;
});
}
});
}
};
});
我在表格正文滚动方面遇到了同样的问题。我已经通过以下方式解决了它。
这是我的示例 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 元素，可以通过以下方式完成
这也是工作$anchorScroll。例子
<div ng-controller="ScrollController">
<a ng-click="gotoBottom()">Go to bottom</a>
<a id="bottom"></a> You're at the bottom!
</div>
js:-
.controller(function($scope, $location, $anchorScroll) {
$scope.gotoBottom = function() {
// set the location.hash to the id of
// the element you wish to scroll to.
$location.hash('bottom');
// call $anchorScroll()
$anchorScroll();
};
})
我见过的最简单的解决方案：
$location.hash('focus');
// 调用 $anchorScroll() $anchorScroll();