Redirect pageup/pagedown without manually animating the scroll

client/components/ChatUserList.vue

@@ -13,10 +13,10 @@
 				aria-label="Search among the user list"
 				tabindex="-1"
 				@input="setUserSearchInput"
-				@keydown.up="navigateUserList(-1)"
+				@keydown.up="navigateUserList($event, -1)"
-				@keydown.down="navigateUserList(1)"
+				@keydown.down="navigateUserList($event, 1)"
-				@keydown.page-up="navigateUserList(-10)"
+				@keydown.page-up="navigateUserList($event, -10)"
-				@keydown.page-down="navigateUserList(10)"
+				@keydown.page-down="navigateUserList($event, 10)"
 				@keydown.enter="selectUser">
 		</div>
 		<div class="names">
@@ -146,7 +146,11 @@ export default {
 		removeHoverUser() {
 			this.activeUser = null;
 		},
-		navigateUserList(direction) {
+		navigateUserList(event, direction) {
+			// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
+			// and redirecting it to the message list container for scrolling
+			event.stopImmediatePropagation();
+
 			let users = this.channel.users;
 
 			// Only using filteredUsers when we have to avoids filtering when it's not needed

client/components/MessageList.vue

@@ -1,7 +1,8 @@
 <template>
 	<div
 		ref="chat"
-		class="chat">
+		class="chat"
+		tabindex="-1">
 		<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
 			<button
 				ref="loadMoreButton"

client/css/style.css

@@ -1044,6 +1044,7 @@ background on hover (unless active) */
 	flex-direction: column;
 	overscroll-behavior: contain;
 	-webkit-overflow-scrolling: touch;
+	outline: none;
 }
 
 #chat .userlist {

client/js/keybinds.js

@@ -4,33 +4,6 @@ const $ = require("jquery");
 const Mousetrap = require("mousetrap");
 const utils = require("./utils");
 
-Mousetrap.bind([
-	"pageup",
-	"pagedown",
-], function(e, key) {
-	let container = $("#windows .window.active");
-
-	// Chat windows scroll message container
-	if (container.prop("id") === "chat-container") {
-		container = container.find(".chan.active .chat");
-	}
-
-	container.finish();
-
-	const offset = container.get(0).clientHeight * 0.9;
-	let scrollTop = container.scrollTop();
-
-	if (key === "pageup") {
-		scrollTop = Math.floor(scrollTop - offset);
-	} else {
-		scrollTop = Math.ceil(scrollTop + offset);
-	}
-
-	container.animate({scrollTop}, 200);
-
-	return false;
-});
-
 Mousetrap.bind([
 	"alt+up",
 	"alt+down",
@@ -104,8 +77,6 @@ const ignoredKeys = {
 	19: true, // Pause
 	20: true, // CapsLock
 	27: true, // Escape
-	33: true, // PageUp
-	34: true, // PageDown
 	35: true, // End
 	36: true, // Home
 	37: true, // ArrowLeft
@@ -143,6 +114,12 @@ $(document).on("keydown", (e) => {
 		return;
 	}
 
+	// Redirect pagedown/pageup keys to messages container so it scrolls
+	if (e.which === 33 || e.which === 34) {
+		$("#windows .window.active .chan.active .chat").trigger("focus");
+		return;
+	}
+
 	const tagName = e.target.tagName;
 
 	// Ignore if we're already typing into <input> or <textarea>