Fix alt+scroll offset from elements above sticky header (#1131)

2 files changed, 29 insertions, 27 deletions

diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index ebd11e0a..b5dd4ba6 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -97,7 +97,7 @@ export class Display extends EventDispatcher {
         /** @type {boolean} */
         this._historyHasChanged = false;
         /** @type {?Element} */
-        this._navigationHeader = document.querySelector('#navigation-header');
+        this._aboveStickyHeader = document.querySelector('#above-sticky-header');
         /** @type {import('display').PageType} */
         this._contentType = 'clear';
         /** @type {string} */
@@ -1516,8 +1516,8 @@ export class Display extends EventDispatcher {
         }
         let target = (index === 0 && definitionIndex <= 0) || node === null ? 0 : this._getElementTop(node);
 
-        if (this._navigationHeader !== null) {
-            target -= this._navigationHeader.getBoundingClientRect().height;
+        if (this._aboveStickyHeader !== null && target !== 0) {
+            target += this._aboveStickyHeader.getBoundingClientRect().height;
         }
 
         this._windowScroll.stop();
diff --git a/ext/search.html b/ext/search.html
index e15f9bb9..4324dad5 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -23,31 +23,33 @@
 <div class="content-outer">
     <div class="content">
         <div class="content-scroll scrollbar" id="content-scroll">
-            <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
-            <div class="search-header-wrapper">
-                <div class="search-header">
-                    <div id="intro">
-                        <h1>Yomitan Search</h1>
-                    </div>
+            <div id="above-sticky-header">
+                <div class="top-progress-bar-container"><div class="progress-bar-indeterminant" id="progress-indicator" hidden></div></div>
+                <div class="search-header-wrapper">
+                    <div class="search-header">
+                        <div id="intro">
+                            <h1>Yomitan Search</h1>
+                        </div>
 
-                    <div class="scan-disable">
-                        <div class="search-options">
-                            <div class="search-option" id="search-option-profile-select">
-                                <span class="profile-select-container"><select class="profile-select" id="profile-select">
-                                    <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
-                                </select></span>
-                            </div>
-                            <label class="search-option" id="search-option-clipboard-monitor-container">
-                                <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                <span class="search-option-label">Clipboard monitor</span>
-                            </label>
-                            <label class="search-option" id="search-option-wanakana">
-                                <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
-                                <span class="search-option-label">Automatic kana conversion</span>
-                            </label>
-                            <div class="search-option" id="query-parser-mode-container" hidden>
-                                <span class="search-option-pre-label">Parser:</span>
-                                <select id="query-parser-mode-select"></select>
+                        <div class="scan-disable">
+                            <div class="search-options">
+                                <div class="search-option" id="search-option-profile-select">
+                                    <span class="profile-select-container"><select class="profile-select" id="profile-select">
+                                        <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+                                    </select></span>
+                                </div>
+                                <label class="search-option" id="search-option-clipboard-monitor-container">
+                                    <label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                    <span class="search-option-label">Clipboard monitor</span>
+                                </label>
+                                <label class="search-option" id="search-option-wanakana">
+                                    <label class="toggle"><input type="checkbox" id="wanakana-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+                                    <span class="search-option-label">Automatic kana conversion</span>
+                                </label>
+                                <div class="search-option" id="query-parser-mode-container" hidden>
+                                    <span class="search-option-pre-label">Parser:</span>
+                                    <select id="query-parser-mode-select"></select>
+                                </div>
                             </div>
                         </div>
                     </div>