javascript - Simplebar 滚动条插件 - 在功能中滚动到顶部/重置位置

Question

当某个功能被触发时，我需要能够在我的 ui-routed angular 单页站点中滚动回页面顶部，但我已经将 simplebar 滚动条插件用作自定义滚动条，所以可以' t 使用窗口 scrolltop 方法将用户带回到页面顶部。

我不能使用任何窗口/文档滚动方法，因为使用 simplebar 的容器是一个固定的 100vh 容器，因此窗口总是滚动到顶部。

我尝试使用下面的 jquery 方法将滚动条的位置重置回顶部，但无法正常工作，并且控制台中没有错误消息。

angular.element('#mainContent').simplebar('getScrollElement').scrollTop(0);

我也在纯 js 中尝试过，它在控制台中返回“不是函数”:

var mainContent = new SimpleBar(document.getElementById('mainContent'));

mainContent.SimpleBar.getScrollElement().scrollTop = 0;

Answer 1

new SimpleBar(xxx) 方法似乎不适用于 data-simplebar html 属性。 我不想以编程方式初始化 SimpleBar，所以我改为使用它:

$('#mainContent .simplebar-content-wrapper').scrollTop(some_value)

实际的可滚动元素将具有 simplebar-content-wrapper 类，并且它将位于您为其添加了 SimpleBar 的元素内。

类 simplebar-content-wrapper 在其 documentation 中被提及并且可以预期跨版本是一致的。

如果您级联了 SimpleBars，就会出现问题。解决方案:

1. $('#mainContent .simplebar-content-wrapper')[0].scrollTop = some_value:这只会滚动正确的 SimpleBar，因为如今 JQuery is in document order 返回的元素.
2. $('#mainContent>>>>.simplebar-content-wrapper').scrollTop(some_value): SimpleBar 组件的层级不保证是在未来的版本中保持不变，这在未来可能会失败。