在手风琴内部滚动到顶部

Question

在我的页面中有 2 个卷轴。

一个在页面中很明显（它们没有加载 ajax 或其他内容。）

另一个在手风琴里面。

我希望这些卷轴始终位于顶部。他们有相同的 class 名字。

使用代码片段我可以实现我的第一个目标，在明显的滚动中滚动到顶部

$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);

还有这个

var messageBody = document.querySelector('.m-messenger__messages');
messageBody.scrollTop = messageBody.scrollHeight - messageBody.clientHeight;

但是，手风琴菜单内的滚动不受此更改的影响。

如果我打开手风琴，运行这个片段会滚动到顶部。这样要么我需要找到一种方法运行此代码段不仅适用于页面中的所有滚动条，也适用于当我点击手风琴时，需要执行此 javascript 代码。

我想用第一个方案解决这个问题

这个我试过了，也没成功。如果我将 alert() 而不是 scrolltop 放在这个函数中，我得到了警报框。

$(".m-accordion__item").click(function() {
    $('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

我怎样才能实现这个目标？

Answer 1

这解决了我的问题。顺便说一句，这是 bootstrap4。这样它就可以应用于 bootstrap 4 个模板中的任何一个。

$('.collapse').on('shown.bs.collapse', function(e) {

$('.m-messenger__messages').scrollTop($('.m-messenger__messages')[0].scrollHeight);
});

Scrolling to top inside an accordion