diff --git a/static/js/scroll_bar.js b/static/js/scroll_bar.js
new file mode 100644
index 0000000000..c33dd6704c
--- /dev/null
+++ b/static/js/scroll_bar.js
@@ -0,0 +1,50 @@
+$(function () {
+    $("#stream-filters-container").perfectScrollbar({
+        suppressScrollX: true,
+        useKeyboard: false,
+        wheelSpeed: 20
+    });
+});
+
+function scrollbarWidth() {
+    $('body').prepend('<div id="outertest" style="width:200px; height:150px; position: absolute; top: 0; left: 0; overflow-x:hidden; overflow-y:scroll; background: #ff0000; visibility: hidden;"><div id="innertest" style="width:100%; height: 200px; overflow-y: visible;">&nbsp;</div></div>');
+
+    var scrollwidth = $("#outertest").outerWidth() - $("#innertest").outerWidth();
+
+    $("#outertest").remove();
+
+    return scrollwidth;
+}
+
+// Workaround for browsers with fixed scrollbars
+$(function () {
+
+
+   var sbWidth = scrollbarWidth();
+
+   if (sbWidth > 0) {
+
+    $(".header").css("left", "-" + sbWidth + "px");
+    $(".header-main").css("left", sbWidth + "px");
+    $(".header-main").css("max-width", (1400 + sbWidth) + "px");
+    $(".header-main .column-middle").css("margin-right", (250 + sbWidth) + "px");
+
+    $(".fixed-app").css("left", "-" + sbWidth + "px");
+    $(".fixed-app .app-main").css("max-width", (1400 + sbWidth) + "px");
+    $(".fixed-app .column-middle").css("margin-left", (250 + sbWidth) + "px");
+
+    $(".column-right").css("right", sbWidth + "px");
+    $(".app-main .right-sidebar").css({"margin-left": (sbWidth) + "px",
+                                       "width": (250 - sbWidth) + "px"});
+
+    $("#compose").css("left", "-" + sbWidth + "px");
+    $(".compose-content").css({"left": sbWidth + "px",
+                               "margin-right": (250 + sbWidth) + "px"});
+    $("#compose-container").css("max-width", (1400 + sbWidth) + "px");
+
+    $("head").append("<style> @media (max-width: 975px) { .compose-content, .header-main .column-middle { margin-right: " + (7 + sbWidth) + "px !important; } } " +
+                     "@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +
+                     "</style>");
+   }
+
+});
diff --git a/static/js/ui.js b/static/js/ui.js
index a9f8c2359d..e3922a7747 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -1356,56 +1356,7 @@ $(function () {
     }
 });
 
-$(function () {
-    $("#stream-filters-container").perfectScrollbar({
-        suppressScrollX: true,
-        useKeyboard: false,
-        wheelSpeed: 20
-    });
-});
 
-function scrollbarWidth() {
-    $('body').prepend('<div id="outertest" style="width:200px; height:150px; position: absolute; top: 0; left: 0; overflow-x:hidden; overflow-y:scroll; background: #ff0000; visibility: hidden;"><div id="innertest" style="width:100%; height: 200px; overflow-y: visible;">&nbsp;</div></div>');
-
-    var scrollwidth = $("#outertest").outerWidth() - $("#innertest").outerWidth();
-
-    $("#outertest").remove();
-
-    return scrollwidth;
-}
-
-// Workaround for browsers with fixed scrollbars
-$(function () {
-
-
-   var sbWidth = scrollbarWidth();
-
-   if (sbWidth > 0) {
-
-    $(".header").css("left", "-" + sbWidth + "px");
-    $(".header-main").css("left", sbWidth + "px");
-    $(".header-main").css("max-width", (1400 + sbWidth) + "px");
-    $(".header-main .column-middle").css("margin-right", (250 + sbWidth) + "px");
-
-    $(".fixed-app").css("left", "-" + sbWidth + "px");
-    $(".fixed-app .app-main").css("max-width", (1400 + sbWidth) + "px");
-    $(".fixed-app .column-middle").css("margin-left", (250 + sbWidth) + "px");
-
-    $(".column-right").css("right", sbWidth + "px");
-    $(".app-main .right-sidebar").css({"margin-left": (sbWidth) + "px",
-                                       "width": (250 - sbWidth) + "px"});
-
-    $("#compose").css("left", "-" + sbWidth + "px");
-    $(".compose-content").css({"left": sbWidth + "px",
-                               "margin-right": (250 + sbWidth) + "px"});
-    $("#compose-container").css("max-width", (1400 + sbWidth) + "px");
-
-    $("head").append("<style> @media (max-width: 975px) { .compose-content, .header-main .column-middle { margin-right: " + (7 + sbWidth) + "px !important; } } " +
-                     "@media (max-width: 775px) { .fixed-app .column-middle { margin-left: " + (7 + sbWidth) + "px !important; } } " +
-                     "</style>");
-   }
-
-});
 
 return exports;
 }());
diff --git a/tools/jslint/check-all.js b/tools/jslint/check-all.js
index 785a903fe5..33ea4a1e5a 100644
--- a/tools/jslint/check-all.js
+++ b/tools/jslint/check-all.js
@@ -28,7 +28,7 @@ var globals =
     + ' message_edit tab_bar emoji popovers navigate people settings alert_words_ui message_store'
     + ' avatar feature_flags search_suggestion referral stream_color Dict'
     + ' Filter summary admin stream_data muting WinChan muting_ui Socket channel'
-    + ' message_flags bot_data loading favicon resize'
+    + ' message_flags bot_data loading favicon resize scroll_bar'
 
     // colorspace.js
     + ' colorspace'
diff --git a/zproject/settings.py b/zproject/settings.py
index c27c72359d..9fe29eb0f5 100644
--- a/zproject/settings.py
+++ b/zproject/settings.py
@@ -544,6 +544,7 @@ JS_SPECS = {
             'js/message_edit.js',
             'js/resize.js',
             'js/ui.js',
+            'js/scroll_bar.js',
             'js/popovers.js',
             'js/typeahead_helper.js',
             'js/search_suggestion.js',