diff --git a/src/components/structures/AutoHideScrollbar.js b/src/components/structures/AutoHideScrollbar.js
index 72d48a2084..3f27f51f18 100644
--- a/src/components/structures/AutoHideScrollbar.js
+++ b/src/components/structures/AutoHideScrollbar.js
@@ -124,6 +124,7 @@ export default class AutoHideScrollbar extends React.Component {
                     style={this.props.style}
                     className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
                     onScroll={this.props.onScroll}
+                    onWheel={this.props.onWheel}
                 >
             <div className="mx_AutoHideScrollbar_offset">
                 { this.props.children }
diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js
index 03e1f8db04..76e6dfa96a 100644
--- a/src/components/structures/IndicatorScrollbar.js
+++ b/src/components/structures/IndicatorScrollbar.js
@@ -24,6 +24,11 @@ export default class IndicatorScrollbar extends React.Component {
         // and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
         // by the parent element.
         trackHorizontalOverflow: PropTypes.bool,
+
+        // If true, when the user tries to use their mouse wheel in the component it will
+        // scroll horizontally rather than vertically. This should only be used on components
+        // with no vertical scroll opportunity.
+        verticalScrollsHorizontally: PropTypes.bool,
     };
 
     constructor(props) {
@@ -113,6 +118,13 @@ export default class IndicatorScrollbar extends React.Component {
         }
     }
 
+    onMouseWheel = (e) => {
+        if (this.props.verticalScrollsHorizontally && this._scrollElement) {
+            // noinspection JSSuspiciousNameCombination
+            this._scrollElement.scrollLeft += e.deltaY / 2; // divide by 2 to reduce harshness
+        }
+    };
+
     render() {
         const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
         const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
@@ -124,6 +136,7 @@ export default class IndicatorScrollbar extends React.Component {
         return (<AutoHideScrollbar
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
+            onWheel={this.onMouseWheel}
             {... this.props}
         >
             { leftOverflowIndicator }
diff --git a/src/components/views/rooms/RoomBreadcrumbs.js b/src/components/views/rooms/RoomBreadcrumbs.js
index 51677bf471..a45b8f257f 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.js
+++ b/src/components/views/rooms/RoomBreadcrumbs.js
@@ -333,7 +333,8 @@ export default class RoomBreadcrumbs extends React.Component {
             );
         });
         return (
-            <IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs" trackHorizontalOverflow={true}>
+            <IndicatorScrollbar ref="scroller" className="mx_RoomBreadcrumbs"
+                                trackHorizontalOverflow={true} verticalScrollsHorizontally={true}>
                 { avatars }
             </IndicatorScrollbar>
         );