diff --git a/humbug/settings.py b/humbug/settings.py
index 613bf113ca..713d2b454c 100644
--- a/humbug/settings.py
+++ b/humbug/settings.py
@@ -281,6 +281,7 @@ PIPELINE_JS = {
             'js/blueslip.js',
             'js/util.js',
             'js/setup.js',
+            'js/viewport.js',
             'js/rows.js',
             'js/stream_list.js',
             'js/narrow.js',
diff --git a/zephyr/static/js/viewport.js b/zephyr/static/js/viewport.js
new file mode 100644
index 0000000000..9c9ed15b56
--- /dev/null
+++ b/zephyr/static/js/viewport.js
@@ -0,0 +1,44 @@
+var viewport = (function () {
+var exports = {};
+
+var jwindow;
+var height;
+var width;
+
+exports.scrollTop = function viewport_scrollTop () {
+    return jwindow.scrollTop.apply(jwindow, arguments);
+};
+
+exports.height = function viewport_height() {
+    if (arguments.length !== 0) {
+        height = undefined;
+        return jwindow.height.apply(jwindow, arguments);
+    }
+    if (height === undefined) {
+        height = $(window).height();
+    }
+    return height;
+};
+
+exports.width = function viewport_width() {
+    if (arguments.length !== 0) {
+        width = undefined;
+        return jwindow.width.apply(jwindow, arguments);
+    }
+    if (width === undefined) {
+        width = jwindow.width();
+    }
+    return width;
+};
+
+$(function () {
+    jwindow = $(window);
+    // This handler must be placed before all resize handlers in our application
+    jwindow.resize(function () {
+        height = undefined;
+        width = undefined;
+    });
+});
+
+return exports;
+}());
diff --git a/zephyr/static/js/zephyr.js b/zephyr/static/js/zephyr.js
index 57f3e1ad17..e8080eff2d 100644
--- a/zephyr/static/js/zephyr.js
+++ b/zephyr/static/js/zephyr.js
@@ -9,8 +9,6 @@ var recent_subjects = {};
 var queued_mark_as_read = [];
 var queued_flag_timer;
 
-var viewport = $(window);
-
 var get_updates_params = {
     pointer: -1
 };