diff --git a/ext/js/display/display.js b/ext/js/display/display.js index 4066e3319..49750618a 100644 --- a/ext/js/display/display.js +++ b/ext/js/display/display.js @@ -174,7 +174,7 @@ export class Display extends EventDispatcher { /** @type {OptionToggleHotkeyHandler} */ this._optionToggleHotkeyHandler = new OptionToggleHotkeyHandler(this); /** @type {ElementOverflowController} */ - this._elementOverflowController = new ElementOverflowController(); + this._elementOverflowController = new ElementOverflowController(this); /** @type {boolean} */ this._frameVisible = (pageType === 'search'); /** @type {HTMLElement} */ @@ -381,6 +381,16 @@ export class Display extends EventDispatcher { } } + /** + * @param {Element} element + */ + scrollUpToElementTop(element) { + const top = this._getElementTop(element); + if (this._windowScroll.y > top) { + this._windowScroll.toY(top); + } + } + /** * @param {{clearable?: boolean, useBrowserHistory?: boolean}} details */ diff --git a/ext/js/display/element-overflow-controller.js b/ext/js/display/element-overflow-controller.js index bf26ff252..d8f90d803 100644 --- a/ext/js/display/element-overflow-controller.js +++ b/ext/js/display/element-overflow-controller.js @@ -19,7 +19,12 @@ import {EventListenerCollection} from '../core/event-listener-collection.js'; export class ElementOverflowController { - constructor() { + /** + * @param {import('./display.js').Display} display + */ + constructor(display) { + /** @type {import('./display.js').Display} */ + this._display = display; /** @type {Element[]} */ this._elements = []; /** @type {?(number|import('core').Timeout)} */ @@ -141,7 +146,10 @@ export class ElementOverflowController { ]; for (const collapsedElement of collapsedElements) { if (collapsedElement === null) { continue; } - collapsedElement.classList.toggle('collapsed'); + const collapsed = collapsedElement.classList.toggle('collapsed'); + if (collapsed) { + this._display.scrollUpToElementTop(element); + } } }