Question

<div class="container">
    <label ng-repaet"x in items">{{x}}</label>
</div>

我希望容器div的滚动条在容器溢出时自动进入底部，并将标签项添加到其中。

div容器的css类是：

.container{
    position:relative;
    display:block;
    overflow-y:scroll;
    overflow-wrap:break-word;
    height:300px;
}

而且我的滚动条样式如下：

::-webkit-scrollbar{
    width:6px;
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 0px;
}
::-webkit-scrollbar-thumb{
    border-radius: 0px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

Answer 1

您可以在指令的链接功能中添加$scope.$watch，如下所示：

function dynamicContainer() {
    return {
        restrict: 'AE',
        template: '<div class="container container-dynamic"><div ng-repeat="item in data track by $index">{{item}}</div></div>',
        scope: {
            data: '=data'
        },
        replace: true,
        link: ($scope, $el, $attrs) => {
            $scope.$watch(() => {
                return $el[0].childNodes.length;
            }, (newValue, oldValue) => {
                $el.animate({
                    scrollTop: $el[0].scrollHeight
                });

                if (newValue !== oldValue) {
                    $el.animate({
                        scrollTop: $el[0].scrollHeight
                    });
                }
            });
        }
    };
}

此处为您pen。

如何在div中添加新内容时自动向下滚动到div的底部？

1 个答案: