diff --git a/package.json b/package.json
index 12ed63929a..7a80b89140 100644
--- a/package.json
+++ b/package.json
@@ -250,6 +250,7 @@
           "src/scripts/inputManager.js",
           "src/scripts/keyboardNavigation.js",
           "src/scripts/playlists.js",
+          "src/scripts/scrollHelper.js",
           "src/scripts/serverNotifications.js",
           "src/scripts/settings/appSettings.js",
           "src/scripts/settings/userSettings.js",
diff --git a/src/components/collectionEditor/collectionEditor.js b/src/components/collectionEditor/collectionEditor.js
index 18cc0d311f..67daad9f2e 100644
--- a/src/components/collectionEditor/collectionEditor.js
+++ b/src/components/collectionEditor/collectionEditor.js
@@ -212,7 +212,7 @@ import 'flexStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/dialogHelper/dialogHelper.js b/src/components/dialogHelper/dialogHelper.js
index ca7c94a416..af1a278cb4 100644
--- a/src/components/dialogHelper/dialogHelper.js
+++ b/src/components/dialogHelper/dialogHelper.js
@@ -376,7 +376,7 @@ import 'scrollStyles';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/filtermenu/filtermenu.js b/src/components/filtermenu/filtermenu.js
index 936e2b0407..075af143d2 100644
--- a/src/components/filtermenu/filtermenu.js
+++ b/src/components/filtermenu/filtermenu.js
@@ -194,6 +194,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'apphost',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/guide/guide-settings.js b/src/components/guide/guide-settings.js
index 77a3637251..aded7ac5dd 100644
--- a/src/components/guide/guide-settings.js
+++ b/src/components/guide/guide-settings.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'userSettings', 'layoutManager', 'connectionManager', 'require', 'loading', 'scrollHelper', 'emby-checkbox', 'emby-radio', 'css!./../formdialog', 'material-icons'], function (dialogHelper, globalize, userSettings, layoutManager, connectionManager, require, loading, scrollHelper) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     function saveCategories(context, options) {
 
         var categories = [];
diff --git a/src/components/guide/guide.js b/src/components/guide/guide.js
index e18f053a5a..0d3c721e2d 100644
--- a/src/components/guide/guide.js
+++ b/src/components/guide/guide.js
@@ -1,6 +1,8 @@
 define(['require', 'inputManager', 'browser', 'globalize', 'connectionManager', 'scrollHelper', 'serverNotifications', 'loading', 'datetime', 'focusManager', 'playbackManager', 'userSettings', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'dom', 'css!./guide.css', 'programStyles', 'material-icons', 'scrollStyles', 'emby-programcell', 'emby-button', 'paper-icon-button-light', 'emby-tabs', 'emby-scroller', 'flexStyles', 'webcomponents'], function (require, inputManager, browser, globalize, connectionManager, scrollHelper, serverNotifications, loading, datetime, focusManager, playbackManager, userSettings, imageLoader, events, layoutManager, itemShortcuts, dom) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     serverNotifications = serverNotifications.default || serverNotifications;
 
     function showViewSettings(instance) {
diff --git a/src/components/imageDownloader/imageDownloader.js b/src/components/imageDownloader/imageDownloader.js
index fbe98c532f..9ad65dd157 100644
--- a/src/components/imageDownloader/imageDownloader.js
+++ b/src/components/imageDownloader/imageDownloader.js
@@ -1,6 +1,8 @@
 define(['dom', 'loading', 'apphost', 'dialogHelper', 'connectionManager', 'imageLoader', 'browser', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'emby-checkbox', 'paper-icon-button-light', 'emby-button', 'formDialogStyle', 'cardStyle'], function (dom, loading, appHost, dialogHelper, connectionManager, imageLoader, browser, layoutManager, scrollHelper, globalize, require) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var enableFocusTransform = !browser.slow && !browser.edge;
 
     var currentItemId;
diff --git a/src/components/imageeditor/imageeditor.js b/src/components/imageeditor/imageeditor.js
index 0a873fa4c7..766304f9aa 100644
--- a/src/components/imageeditor/imageeditor.js
+++ b/src/components/imageeditor/imageeditor.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'browser', 'apphost', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light', 'css!./imageeditor'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require, browser, appHost) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var enableFocusTransform = !browser.slow && !browser.edge;
 
     var currentItem;
diff --git a/src/components/playlisteditor/playlisteditor.js b/src/components/playlisteditor/playlisteditor.js
index 7b1e915e1f..78f0cf3dec 100644
--- a/src/components/playlisteditor/playlisteditor.js
+++ b/src/components/playlisteditor/playlisteditor.js
@@ -210,7 +210,7 @@ import 'emby-button';
     }
 
     function centerFocus(elem, horiz, on) {
-        import('scrollHelper').then(scrollHelper => {
+        import('scrollHelper').then((scrollHelper) => {
             const fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/recordingcreator/recordingcreator.js b/src/components/recordingcreator/recordingcreator.js
index d18d5fcb6c..3b7cbe49aa 100644
--- a/src/components/recordingcreator/recordingcreator.js
+++ b/src/components/recordingcreator/recordingcreator.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'datetime', 'imageLoader', 'recordingFields', 'events', 'emby-checkbox', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, datetime, imageLoader, recordingFields, events) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var currentDialog;
     var closeAction;
     var currentRecordingFields;
diff --git a/src/components/recordingcreator/recordingeditor.js b/src/components/recordingcreator/recordingeditor.js
index c3f40fcddb..2fde735404 100644
--- a/src/components/recordingcreator/recordingeditor.js
+++ b/src/components/recordingcreator/recordingeditor.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'scrollStyles', 'emby-button', 'emby-collapse', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var currentDialog;
     var recordingDeleted = false;
     var currentItemId;
diff --git a/src/components/recordingcreator/seriesrecordingeditor.js b/src/components/recordingcreator/seriesrecordingeditor.js
index a101ce53ec..053dd1a12c 100644
--- a/src/components/recordingcreator/seriesrecordingeditor.js
+++ b/src/components/recordingcreator/seriesrecordingeditor.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'imageLoader', 'datetime', 'scrollStyles', 'emby-button', 'emby-checkbox', 'emby-input', 'emby-select', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'material-icons', 'flexStyles'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper, imageLoader, datetime) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var currentDialog;
     var recordingUpdated = false;
     var recordingDeleted = false;
diff --git a/src/components/refreshdialog/refreshdialog.js b/src/components/refreshdialog/refreshdialog.js
index 3edb725c4a..593cc0dc2d 100644
--- a/src/components/refreshdialog/refreshdialog.js
+++ b/src/components/refreshdialog/refreshdialog.js
@@ -42,6 +42,7 @@ define(['dom', 'shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionM
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/sortmenu/sortmenu.js b/src/components/sortmenu/sortmenu.js
index dbf7ef1a7f..abe55a6092 100644
--- a/src/components/sortmenu/sortmenu.js
+++ b/src/components/sortmenu/sortmenu.js
@@ -17,6 +17,7 @@ define(['require', 'dom', 'focusManager', 'dialogHelper', 'loading', 'layoutMana
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/subtitleeditor/subtitleeditor.js b/src/components/subtitleeditor/subtitleeditor.js
index 9c0992c53c..4c33252574 100644
--- a/src/components/subtitleeditor/subtitleeditor.js
+++ b/src/components/subtitleeditor/subtitleeditor.js
@@ -420,6 +420,7 @@ define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'userSettings',
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/components/tunerPicker.js b/src/components/tunerPicker.js
index e7c92851a4..f064f95152 100644
--- a/src/components/tunerPicker.js
+++ b/src/components/tunerPicker.js
@@ -1,6 +1,8 @@
 define(['dialogHelper', 'dom', 'layoutManager', 'connectionManager', 'globalize', 'loading', 'browser', 'focusManager', 'scrollHelper', 'material-icons', 'formDialogStyle', 'emby-button', 'emby-itemscontainer', 'cardStyle'], function (dialogHelper, dom, layoutManager, connectionManager, globalize, loading, browser, focusManager, scrollHelper) {
     'use strict';
 
+    scrollHelper = scrollHelper.default || scrollHelper;
+
     var enableFocusTransform = !browser.slow && !browser.edge;
 
     function getEditorHtml() {
diff --git a/src/components/viewSettings/viewSettings.js b/src/components/viewSettings/viewSettings.js
index 28a9854c34..198c0a541c 100644
--- a/src/components/viewSettings/viewSettings.js
+++ b/src/components/viewSettings/viewSettings.js
@@ -33,6 +33,7 @@ define(['require', 'dialogHelper', 'loading', 'apphost', 'layoutManager', 'conne
 
     function centerFocus(elem, horiz, on) {
         require(['scrollHelper'], function (scrollHelper) {
+            scrollHelper = scrollHelper.default || scrollHelper;
             var fn = on ? 'on' : 'off';
             scrollHelper.centerFocus[fn](elem, horiz);
         });
diff --git a/src/scripts/scrollHelper.js b/src/scripts/scrollHelper.js
index 1a36594026..020888a2e3 100644
--- a/src/scripts/scrollHelper.js
+++ b/src/scripts/scrollHelper.js
@@ -1,137 +1,137 @@
-define(['focusManager', 'dom', 'scrollStyles'], function (focusManager, dom) {
-    'use strict';
+import focusManager from 'focusManager';
+import dom from 'dom';
+import 'scrollStyles';
 
-    function getBoundingClientRect(elem) {
+function getBoundingClientRect(elem) {
 
-        // Support: BlackBerry 5, iOS 3 (original iPhone)
-        // If we don't have gBCR, just use 0,0 rather than error
-        if (elem.getBoundingClientRect) {
-            return elem.getBoundingClientRect();
-        } else {
-            return { top: 0, left: 0 };
-        }
+    // Support: BlackBerry 5, iOS 3 (original iPhone)
+    // If we don't have gBCR, just use 0,0 rather than error
+    if (elem.getBoundingClientRect) {
+        return elem.getBoundingClientRect();
+    } else {
+        return { top: 0, left: 0 };
+    }
+}
+
+export function getPosition(scrollContainer, item, horizontal) {
+
+    const slideeOffset = getBoundingClientRect(scrollContainer);
+    const itemOffset = getBoundingClientRect(item);
+
+    let offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+    let size = horizontal ? itemOffset.width : itemOffset.height;
+    if (!size && size !== 0) {
+        size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
     }
 
-    function getPosition(scrollContainer, item, horizontal) {
+    const currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
 
-        var slideeOffset = getBoundingClientRect(scrollContainer);
-        var itemOffset = getBoundingClientRect(item);
+    offset += currentStart;
 
-        var offset = horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
-        var size = horizontal ? itemOffset.width : itemOffset.height;
-        if (!size && size !== 0) {
-            size = item[horizontal ? 'offsetWidth' : 'offsetHeight'];
-        }
+    const frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
 
-        var currentStart = horizontal ? scrollContainer.scrollLeft : scrollContainer.scrollTop;
+    const currentEnd = currentStart + frameSize;
 
-        offset += currentStart;
-
-        var frameSize = horizontal ? scrollContainer.offsetWidth : scrollContainer.offsetHeight;
-
-        var currentEnd = currentStart + frameSize;
-
-        var isVisible = offset >= currentStart && (offset + size) <= currentEnd;
-
-        return {
-            start: offset,
-            center: (offset - (frameSize / 2) + (size / 2)),
-            end: offset - frameSize + size,
-            size: size,
-            isVisible: isVisible
-        };
-    }
-
-    function toCenter(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
-
-        if (skipWhenVisible && pos.isVisible) {
-            return;
-        }
-
-        if (container.scrollTo) {
-            if (horizontal) {
-                container.scrollTo(pos.center, 0);
-            } else {
-                container.scrollTo(0, pos.center);
-            }
-        } else {
-            if (horizontal) {
-                container.scrollLeft = Math.round(pos.center);
-            } else {
-                container.scrollTop = Math.round(pos.center);
-            }
-        }
-    }
-
-    function toStart(container, elem, horizontal, skipWhenVisible) {
-        var pos = getPosition(container, elem, horizontal);
-
-        if (skipWhenVisible && pos.isVisible) {
-            return;
-        }
-
-        if (container.scrollTo) {
-            if (horizontal) {
-                container.scrollTo(pos.start, 0);
-            } else {
-                container.scrollTo(0, pos.start);
-            }
-        } else {
-            if (horizontal) {
-                container.scrollLeft = Math.round(pos.start);
-            } else {
-                container.scrollTop = Math.round(pos.start);
-            }
-        }
-    }
-
-    function centerOnFocus(e, scrollSlider, horizontal) {
-        var focused = focusManager.focusableParent(e.target);
-
-        if (focused) {
-            toCenter(scrollSlider, focused, horizontal);
-        }
-    }
-
-    function centerOnFocusHorizontal(e) {
-        centerOnFocus(e, this, true);
-    }
-    function centerOnFocusVertical(e) {
-        centerOnFocus(e, this, false);
-    }
+    const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
 
     return {
-        getPosition: getPosition,
-        centerFocus: {
-            on: function (element, horizontal) {
-                if (horizontal) {
-                    dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
-                        capture: true,
-                        passive: true
-                    });
-                } else {
-                    dom.addEventListener(element, 'focus', centerOnFocusVertical, {
-                        capture: true,
-                        passive: true
-                    });
-                }
-            },
-            off: function (element, horizontal) {
-                if (horizontal) {
-                    dom.removeEventListener(element, 'focus', centerOnFocusHorizontal, {
-                        capture: true,
-                        passive: true
-                    });
-                } else {
-                    dom.removeEventListener(element, 'focus', centerOnFocusVertical, {
-                        capture: true,
-                        passive: true
-                    });
-                }
+        start: offset,
+        center: (offset - (frameSize / 2) + (size / 2)),
+        end: offset - frameSize + size,
+        size: size,
+        isVisible: isVisible
+    };
+}
+
+export function toCenter(container, elem, horizontal, skipWhenVisible) {
+    const pos = getPosition(container, elem, horizontal);
+
+    if (skipWhenVisible && pos.isVisible) {
+        return;
+    }
+
+    if (container.scrollTo) {
+        if (horizontal) {
+            container.scrollTo(pos.center, 0);
+        } else {
+            container.scrollTo(0, pos.center);
+        }
+    } else {
+        if (horizontal) {
+            container.scrollLeft = Math.round(pos.center);
+        } else {
+            container.scrollTop = Math.round(pos.center);
+        }
+    }
+}
+
+export function toStart(container, elem, horizontal, skipWhenVisible) {
+    const pos = getPosition(container, elem, horizontal);
+
+    if (skipWhenVisible && pos.isVisible) {
+        return;
+    }
+
+    if (container.scrollTo) {
+        if (horizontal) {
+            container.scrollTo(pos.start, 0);
+        } else {
+            container.scrollTo(0, pos.start);
+        }
+    } else {
+        if (horizontal) {
+            container.scrollLeft = Math.round(pos.start);
+        } else {
+            container.scrollTop = Math.round(pos.start);
+        }
+    }
+}
+
+function centerOnFocus(e, scrollSlider, horizontal) {
+    const focused = focusManager.focusableParent(e.target);
+
+    if (focused) {
+        toCenter(scrollSlider, focused, horizontal);
+    }
+}
+
+function centerOnFocusHorizontal(e) {
+    centerOnFocus(e, this, true);
+}
+function centerOnFocusVertical(e) {
+    centerOnFocus(e, this, false);
+}
+
+export default {
+    getPosition: getPosition,
+    centerFocus: {
+        on: function (element, horizontal) {
+            if (horizontal) {
+                dom.addEventListener(element, 'focus', centerOnFocusHorizontal, {
+                    capture: true,
+                    passive: true
+                });
+            } else {
+                dom.addEventListener(element, 'focus', centerOnFocusVertical, {
+                    capture: true,
+                    passive: true
+                });
             }
         },
-        toCenter: toCenter,
-        toStart: toStart
-    };
-});
+        off: function (element, horizontal) {
+            if (horizontal) {
+                dom.removeEventListener(element, 'focus', centerOnFocusHorizontal, {
+                    capture: true,
+                    passive: true
+                });
+            } else {
+                dom.removeEventListener(element, 'focus', centerOnFocusVertical, {
+                    capture: true,
+                    passive: true
+                });
+            }
+        }
+    },
+    toCenter: toCenter,
+    toStart: toStart
+};