如何滚动到底部或移动焦点到底部的角度

how to scroll to bottom or move focus to bottom in angular?

本文关键字：底部 焦点 移动 何滚动 滚动      更新时间：2023-09-26

我有一个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);
    };
}]);

指令你有两个选择。

  1. 监听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｝});

  2. 使用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
    };
}]);
相关文章：