diff --git a/web/static/css/chat.css b/web/static/css/chat.css
index 2b336af..194e0ec 100644
--- a/web/static/css/chat.css
+++ b/web/static/css/chat.css
@@ -64,6 +64,15 @@ body {
     grid-column: 2;
     grid-row: 2;
     overflow: hidden;
+    position: relative;
+}
+
+/* Auto-scroll checkbox in the corner */
+.chat-column >.autoscroll-field {
+    position: absolute;
+    z-index: 39; /* just below modal shadow */
+    right: 6px;
+    bottom: 4px;
 }
 
 /* Footer row: message entry box */
diff --git a/web/static/js/BareRTC.js b/web/static/js/BareRTC.js
index 2bb68bd..318164a 100644
--- a/web/static/js/BareRTC.js
+++ b/web/static/js/BareRTC.js
@@ -120,6 +120,7 @@ const app = Vue.createApp({
                 // }
             },
             historyScrollbox: null,
+            autoscroll: true, // scroll to bottom on new messages
             DMs: {},
 
             // Responsive CSS controls for mobile.
@@ -1083,6 +1084,8 @@ const app = Vue.createApp({
         },
 
         scrollHistory() {
+            if (!this.autoscroll) return;
+
             window.requestAnimationFrame(() => {
                 this.historyScrollbox.scroll({
                     top: this.historyScrollbox.scrollHeight,
diff --git a/web/templates/chat.html b/web/templates/chat.html
index 58b6ac3..bfed600 100644
--- a/web/templates/chat.html
+++ b/web/templates/chat.html
@@ -425,6 +425,15 @@
 
         <!-- Middle Column: Chat Room/History -->
         <div class="chat-column">
+            <div class="autoscroll-field tag">
+                <label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">
+                    <input type="checkbox"
+                        v-model="autoscroll"
+                        :value="true">
+                    Auto-scroll
+                </label>
+            </div>
+
             <div class="card grid-card">
                 <header class="card-header has-background-link">
                     <div class="columns is-mobile card-header-title has-text-light">