我有一个div,我想在div中添加元素时滚动到div的底部,我知道如何在jquery中做到这一点,但我不知道如何使用angular js滚动
testCaseContainer是div的id
var elem = document.getElementById('testCaseContainer'); // just to
// scroll down
// the line
elem.scrollTop = elem.scrollHeight;
我想知道如何使用angular ?
http://plnkr.co/edit/M8tCL8Szc3h3FatFLycG?p =
预览我在div容器中添加了css,这样它就可以滚动了
.heightClass{
height:100px;
overflow :auto;
}
如何在添加项目时将焦点移到下面…
这是您的解决方案。
模板<div data-ng-controller="TestController">
<button data-ng-click="AddNewItem()">Add New Item</button>
<div class="heightClass" data-dr-scroll-to-bottom>
<div data-ng-repeat="divItem in divList track by $index">
{{divItem}}
</div>
</div>
</div>
控制器app.controller("TestController", ["$scope", function ($scope) {
$scope.divList = [1, 2];
$scope.AddNewItem = function () {
$scope.divList.push(3);
};
}]);
指令你有两个选择。
监听DOMNodeInserted(这已弃用。所以不要用它。监听事件,比如在JavaScript中添加新元素。为了方便起见,我添加了代码。但是不要使用这个代码。使用选项2).
应用程序。指令("drScrollToBottom", function() {
var linkFunction = function(scope, element, iAttrs) {iElement。bind("DOMNodeInserted", function() {console.log (iElement.prop("scrollHeight"));iElement.scrollTop (iElement.prop("scrollHeight"));});
};返回{限制:"A",链接:linkFunction}});
使用arrival .js(可以在这里找到https://github.com/uzairfarooq/arrive/)
应用程序。指令("drScrollToBottom", function () {
var linkFunction = function (scope, iElement, iAttrs) { iElement.arrive("div", function () { console.log(iElement.prop("scrollHeight")); iElement.scrollTop(iElement.prop("scrollHeight")); }); }; return { restrict: "A", link: linkFunction }
});
下面是滚动到页面底部的指令
csapp.directive('csScrollTop', ["$window", function ($window) {
var linkFunction = function (scope) {
scope.$on("$locationChangeSuccess", function () {
$window.scrollTo(0, document.body.scrollHeight);
//$("html, body").animate({ scrollTop: 0 }, "fast");
});
};
return {
restrict: 'E',
link: linkFunction
};
}]);