Question

我想我可能会遗漏一些简单的东西。

我有一个容器元素，以及子元素的ng-repeat，如下所示：

<div id="container">
    <div class="activity" ng-click="myFunc($element)">
    </div>
</div>

我想要的是将容器滚动到单击的活动（容器是可滚动的并且具有设置的高度）。

我尝试使用$ element来从容器顶部获取活动的偏移量，然后使用jQuerys animate函数滚动到偏移量，如下所示：

$("#container").animate({ scrollTop: theOffset, { duration: 'medium',easing:'swing' });

但我似乎无法在$ elemnt上使用.offset ......

我在这里缺少什么？

先谢谢，加比。

Answer 1

虽然我通常不会建议与AngularJS分开操作DOM，但实现此方法的可行方法如下：

我将$element更改为$event，以便从点击事件中获取目标元素：

<div id="container">
    <div class="activity" ng-click="myFunc($event)">
    </div>
</div>

对于javascript部分，获取所选元素的偏移量将获得我们想要的位置。

$scope.myFunc = function(theOffset){
    $("html, body").animate({ scrollTop: $(theOffset.target).offset().top, duration: 'medium',easing:'swing' });
};

我不得不将jquery选择器更改为html, body，以便它在页面本身上进行动画制作，而不仅仅是一个容器。再次，理想情况下，使用AngularJS，您应该避免直接执行这样的jquery DOM操作。

angular - 滚动到单击元素

1 个答案: