diff --git a/client/js/lounge.js b/client/js/lounge.js index 22560ece..1c28c7b5 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -375,6 +375,7 @@ $(function() { utils.toggleNotificationMarkers(false); } + utils.scrollIntoViewNicely(self[0]); slideoutMenu.toggle(false); } diff --git a/client/js/userlist.js b/client/js/userlist.js index 90595e3f..4c6ff81f 100644 --- a/client/js/userlist.js +++ b/client/js/userlist.js @@ -5,6 +5,7 @@ const fuzzy = require("fuzzy"); const Mousetrap = require("mousetrap"); const templates = require("../views"); +const utils = require("./utils"); const chat = $("#chat"); @@ -93,7 +94,7 @@ exports.handleKeybinds = function(input) { } // Adjust scroll when active item is outside of the visible area - userlist.find(".user.active")[0].scrollIntoView(false); + utils.scrollIntoViewNicely(userlist.find(".user.active")[0]); }); // When pressing Enter, open the context menu (emit a click) on the active diff --git a/client/js/utils.js b/client/js/utils.js index 11c84079..e7db6d53 100644 --- a/client/js/utils.js +++ b/client/js/utils.js @@ -15,6 +15,7 @@ module.exports = { lastMessageId, confirmExit, forceFocus, + scrollIntoViewNicely, hasRoleInChannel, move, resetHeight, @@ -59,6 +60,13 @@ function forceFocus() { input.trigger("click").trigger("focus"); } +// Reusable scrollIntoView parameters for channel list / user list +function scrollIntoViewNicely(el) { + // Ideally this would use behavior: "smooth", but that does not consistently work in e.g. Chrome + // https://github.com/iamdustan/smoothscroll/issues/28#issuecomment-364061459 + el.scrollIntoView({block: "nearest", inline: "nearest"}); +} + function collapse() { $(".chan.active .toggle-button.toggle-preview.opened").click(); return true;