Counteract smooth scrolling on breadcrumbs

Smooth scrolling browsers (Firefox) use the relative area to determine how much scroll to apply. Because breadcrumbs are short vertically, the scroll amount is minimal (3 units) in the Y direction. On browsers which don't smooth scroll the units are usually much higher (100 in Chrome on Win 10). Users seem to expect the scrolling to be quicker due to the horizontal space on breadcrumbs, so we add a bit more power to their scroll when it looks small.

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

src/components/structures/IndicatorScrollbar.js

@@ -130,8 +130,18 @@ export default class IndicatorScrollbar extends React.Component {
             const yRetention = 1.0;
 
             if (Math.abs(e.deltaX) <= xyThreshold) {
+                // HACK: We increase the amount of scroll to counteract smooth scrolling browsers.
+                // Smooth scrolling browsers (Firefox) use the relative area to determine the scroll
+                // amount, which means the likely small area of content results in a small amount of
+                // movement - not what people expect. We pick arbitrary values for when to apply more
+                // scroll, and how much to apply. On Windows 10, Chrome scrolls 100 units whereas
+                // Firefox scrolls just 3 due to smooth scrolling.
+
+                const additionalScroll = e.deltaY < 0 ? -50 : 50;
+
                 // noinspection JSSuspiciousNameCombination
-                this._scrollElement.scrollLeft += e.deltaY * yRetention;
+                const val = Math.abs(e.deltaY) < 25 ? (e.deltaY + additionalScroll) : e.deltaY;
+                this._scrollElement.scrollLeft += val * yRetention;
             }
         }
     };