Simplebar滚动条插件 - 在功能

Question

当触发一个函数时，我需要能够在我的ui-routed角度单页网站内滚动回页面的顶部，但是我使用了simplebar滚动条插件作为自定义滚动条，所以可以'使用窗口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

我找到了解决方案。您可以访问滚动元素：

const el = new SimpleBar(document.getElementById('layout'));
el.scrollContentEl.scrollTop = 0;

Answer 2

您可以尝试.animate：

$("body").animate({ scrollTop: 0 }, "slow");

Answer 3

var el = new SimpleBar(document.getElementById('myElement'));
el.getScrollElement().scrollTop = 0;

Answer 4

似乎 new SimpleBar(xxx) 方法不适用于 data-simplebar html 属性。 我不想以编程方式初始化 SimpleBar 所以我用它来代替：

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

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

在其 documentation 中提到了类 simplebar-content-wrapper，并且可以预期在不同版本之间保持一致。

如果你有级联 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 组件的层次结构不能保证在未来版本中保持不变，并且这在未来可能会失败。