Translate vertical scrolling to horizontal movement in breadcrumbs

Fixes https://github.com/vector-im/riot-web/issues/9314

src/components/structures/AutoHideScrollbar.js

@@ -118,12 +118,19 @@ export default class AutoHideScrollbar extends React.Component {
         return this.containerRef.scrollTop;
     }
 
+    onWheel = (e) => {
+        if (this.props.onWheel) {
+            this.props.onWheel(e);
+        }
+    };
+
     render() {
         return (<div
                     ref={this._collectContainerRef}
                     style={this.props.style}
                     className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
                     onScroll={this.props.onScroll}
+                    onWheel={this.onWheel}
                 >
             <div className="mx_AutoHideScrollbar_offset">
                 { this.props.children }

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) {
@@ -106,6 +111,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};
@@ -117,6 +129,7 @@ export default class IndicatorScrollbar extends React.Component {
         return (<AutoHideScrollbar
             ref={this._collectScrollerComponent}
             wrappedRef={this._collectScroller}
+            onWheel={this.onMouseWheel}
             {... this.props}
         >
             { leftOverflowIndicator }

src/components/views/rooms/RoomBreadcrumbs.js

@@ -242,7 +242,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>
         );