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; + } }