Change how current entry is indicated

2 files changed, 20 insertions, 3 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index eadb9dae..8a4cf4a7 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -230,3 +230,7 @@ div.glossary-item.compact-glossary {
 .info-output td {
     text-align: right;
 }
+
+.entry:not(.entry-current) .current {
+    display: none;
+}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index b11e8f99..2f7a694e 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -412,16 +412,23 @@ class Display {
         index = Math.min(index, this.definitions.length - 1);
         index = Math.max(index, 0);
 
-        $('.current').hide().eq(index).show();
+        const entryPre = this.getEntry(this.index);
+        if (entryPre !== null) {
+            entryPre.classList.remove('entry-current');
+        }
+
+        const entry = this.getEntry(index);
+        if (entry !== null) {
+            entry.classList.add('entry-current');
+        }
 
         this.windowScroll.stop();
-        const entry = $('.entry').eq(index);
         let target;
 
         if (scroll) {
             target = scroll;
         } else {
-            target = index === 0 ? 0 : entry.offset().top;
+            target = index === 0 || entry === null ? 0 : Display.getElementTop(entry);
         }
 
         if (smooth) {
@@ -606,4 +613,10 @@ class Display {
     addEventListeners(selector, ...args) {
         this.container.querySelectorAll(selector).forEach((node) => node.addEventListener(...args));
     }
+
+    static getElementTop(element) {
+        const elementRect = element.getBoundingClientRect();
+        const documentRect = document.documentElement.getBoundingClientRect();
+        return elementRect.top - documentRect.top;
+    }
 }