diff --git a/Asset/js/drag-scroll.js b/Asset/js/drag-scroll.js
new file mode 100644
index 0000000..e245240
--- /dev/null
+++ b/Asset/js/drag-scroll.js
@@ -0,0 +1,75 @@
+/*
+ * ShrinkVertically -- optional click-and-drag horizontal scrolling of the board.
+ *
+ * Like the Trello board canvas: press the empty board background and drag left/right
+ * to scroll #board-container horizontally. The pan only starts on empty background --
+ * pressing a task card, a drag handle, or any interactive control is ignored, so this
+ * never interferes with Kanboard's own card and column drag-and-drop.
+ *
+ * Loaded only when the "Drag the board background to scroll" setting is enabled.
+ */
+(function () {
+    "use strict";
+
+    // Pressing any of these (or their descendants) must NOT start a background pan.
+    var IGNORE = "a, button, input, textarea, select, label, " +
+        ".task-board, [data-task-id], .task-board-sort-handle, " +
+        ".draggable-row-handle, .dropdown, .ui-sortable-handle";
+
+    function isIgnored(el) {
+        return !!(el && el.closest && el.closest(IGNORE));
+    }
+
+    function init() {
+        var container = document.getElementById("board-container");
+
+        if (!container || container.getAttribute("data-sv-drag") === "1") {
+            return;
+        }
+
+        container.setAttribute("data-sv-drag", "1");
+        container.classList.add("sv-drag-scroll");
+
+        var dragging = false;
+        var startX = 0;
+        var startScrollLeft = 0;
+
+        container.addEventListener("mousedown", function (e) {
+            // Left button only, and only on empty board background.
+            if (e.button !== 0 || isIgnored(e.target)) {
+                return;
+            }
+
+            dragging = true;
+            startX = e.clientX;
+            startScrollLeft = container.scrollLeft;
+            container.classList.add("sv-grabbing");
+            e.preventDefault();
+        });
+
+        document.addEventListener("mousemove", function (e) {
+            if (!dragging) {
+                return;
+            }
+            container.scrollLeft = startScrollLeft - (e.clientX - startX);
+            e.preventDefault();
+        });
+
+        function stop() {
+            if (!dragging) {
+                return;
+            }
+            dragging = false;
+            container.classList.remove("sv-grabbing");
+        }
+
+        document.addEventListener("mouseup", stop);
+        document.addEventListener("mouseleave", stop);
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", init);
+    } else {
+        init();
+    }
+})();