bookreader
bookreader copied to clipboard
Fix: thumbnail navigation bug when zoomed in (#1401)
Fix for Thumbnail Mode Navigation Bug
This PR fixes the issue where page flipping in thumbnail mode becomes stuck, with visual display showing the new page but page index incorrectly reverting to the previous page. A typo in ModeThumb.js is also fixed.
Problem Analysis: ✅ The root cause of this issue has been identified:
- When
jumpToIndexmethod callsthis.br.drawLeafs()(invoked when animating) instead ofthis.drawLeafs(index), no parameter is passed. ThusscrollTopis not reset byseekTop - During animation,
scrollTopis underestimated, thusleastVisibleandmostVisibleare not calculated as desired - Therefore the current index is not within the visible range (
leastVisibletomostVisible) - The method incorrectly resets the
firstIndexto the last visible page
Fix Implementation: ✅ Two key changes were made to resolve this issue:
-
Prevent index modification during animation:
- Added a check to avoid modifying the
firstIndexwhen animation is in progress
if (!this.br.animating) { if (currentIndex < leastVisible) { this.br.updateFirstIndex(leastVisible); } else if (currentIndex > mostVisible) { this.br.updateFirstIndex(mostVisible); } } - Added a check to avoid modifying the
-
Ensure proper redraw after animation completes:
- Changed
this.br.drawLeafs()tothis.drawLeafs(index) - Added explicit call to
this.drawLeafs(index)after animation completes
if (this.br.refs.$brContainer.prop('scrollTop') == leafTop) { this.drawLeafs(index); } else { this.br.animating = true; this.br.refs.$brContainer.stop(true) .animate({ scrollTop: leafTop }, 'fast', () => { this.br.animating = false; this.drawLeafs(index); }); } - Changed
🛠 Testing Done:
- ✅ Verified page flipping in thumbnail mode now correctly maintains page index
- ✅ Confirmed no regression in other viewing modes
✅ Expected Outcome:
- Page flipping in thumbnail mode now correctly updates both visual display and page index
- Smooth navigation experience with no unexpected index resets
Observation
- When I was testing, I found that
this.br.refs.$brContainer.prop('scrollTop') == leafTopnever returns true. There is always a difference between them. I didn't figure out the reason.
I hope this helps!