以编程方式滚动*在* div中的一个子div

Question

我正在编写自己的指令，在更大的屏幕内控制子div（精确控件）。该指令的视图包含一个滚动条，与较大网页上的滚动条分开。

当用户点击按钮计算结果时，我想跳转到视图的结果部分，IFF结果会返回，但如果我们没有为他的查询得到任何结果，则不会移动屏幕。

我在做这件事时遇到了麻烦。 $ anchorScroll似乎不起作用，它向下滚动整个屏幕而不仅仅是我的指令的子div的内容，实际上如果我想要滚动到的值尚未显示在该屏幕上，则根本不滚动孩子div。

我已经看到很多可以添加到HTML元素以处理滚动的指令示例，但是它们可以在没有我想要的额外编程控制的情况下单击，在决定何时从控制器方法中实际滚动。不幸的是，我不知道如何概括这个逻辑在我的大指令中工作。

我如何以编程方式滚动子div 而不用滚动更大的div？

Answer 1

您可以使用element.scrollTop = x。你可以看到一个基本的演示here - 它将在2秒后自动滚动子div的内容。

该演示使用$timeout，显然您需要将该逻辑放入$http调用成功部分。

假设您完成了其他所有工作，相关部分如下：

var target =  angular.element(document.querySelector('#result'));
// #result is your directive's child div
target[0].scrollTop = 200;
// You'll have to calculate the exact number if it's not a fix one.