From 1d7bd64600ec3431ef0ba7e3120c8b7a2d49afc8 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sun, 30 Nov 2025 09:06:26 -0500 Subject: [PATCH] Make keyboard navigation viewport-aware on initial keypress MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When you scroll the page and then press ↑ or ↓ for the first time, the selection now intelligently starts from what's currently visible in the viewport instead of always starting at the top. **Behavior:** - If chapter section is visible → starts there - If scrolled past chapters → starts at first visible paragraph - Selection only moves when you press a key (not automatically on scroll) This makes navigation feel natural when combined with mouse/trackpad scrolling. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/book.html | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/kjvstudy_org/templates/book.html b/kjvstudy_org/templates/book.html index 8d8002b..739efe3 100644 --- a/kjvstudy_org/templates/book.html +++ b/kjvstudy_org/templates/book.html @@ -515,8 +515,15 @@ document.addEventListener('DOMContentLoaded', function() { selectParagraph(selectedParagraphIndex - 1); } } else { - // No selection, start at chapter section - selectChapterSection(); + // No selection - start with first visible item + if (chapterSection && KJVNav.isInViewport(chapterSection)) { + selectChapterSection(); + } else if (contentParagraphs.length > 0) { + const visibleIndex = KJVNav.findFirstVisibleIndex(Array.from(contentParagraphs)); + selectParagraph(visibleIndex); + } else { + selectChapterSection(); + } } } @@ -547,8 +554,15 @@ document.addEventListener('DOMContentLoaded', function() { selectParagraph(selectedParagraphIndex + 1); } } else { - // No selection, start at chapter section - selectChapterSection(); + // No selection - start with first visible item + if (chapterSection && KJVNav.isInViewport(chapterSection)) { + selectChapterSection(); + } else if (contentParagraphs.length > 0) { + const visibleIndex = KJVNav.findFirstVisibleIndex(Array.from(contentParagraphs)); + selectParagraph(visibleIndex); + } else { + selectChapterSection(); + } } }