From 8c414a9333db603cab223916470fa408ecfd26cc Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Sun, 2 Jun 2019 23:59:02 -0600 Subject: [PATCH] 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 | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/structures/IndicatorScrollbar.js b/src/components/structures/IndicatorScrollbar.js index a62206b32b3..03ce258d374 100644 --- a/src/components/structures/IndicatorScrollbar.js +++ b/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; } } };