Scroll to newly joined/activated channels

Add a new utility function for scrolling elements into view with the
same, consistent options, and use it for both the new channel scrolling
behavior and the existing userlist scroll code.

Implements & resolves #2062

client/js/lounge.js

@@ -375,6 +375,7 @@ $(function() {
 				utils.toggleNotificationMarkers(false);
 			}
 
+			utils.scrollIntoViewNicely(self[0]);
 			slideoutMenu.toggle(false);
 		}
 

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

client/js/utils.js

@@ -14,6 +14,7 @@ module.exports = {
 	lastMessageId,
 	confirmExit,
 	forceFocus,
+	scrollIntoViewNicely,
 	hasRoleInChannel,
 	move,
 	resetHeight,
@@ -58,6 +59,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;