Bookhoard/foliate-js
1
0
Fork 0
mirror of https://github.com/john-okeefe/foliate-js.git synced 2026-09-09 11:29:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Paginator: fix anchoring in scrolled mode

Browse Source 
Anchoring triggers the `scroll` event, which in scrolled mode causes
`#afterScroll()` to be called again with the reason `scroll`, which
shouldn't happen as it's just anchoring, not scrolling.
This commit is contained in:
John Factotum
2023-08-26 06:32:32 +08:00
parent df95960f82
commit ad25f6b5c3
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
paginator.js
+6 -1
View File
@@ -376,6 +376,7 @@ export class Paginator extends HTMLElement {
#margin = 0 #margin = 0
#index = -1 #index = -1
#anchor = 0 // anchor view to a fraction (0-1), Range, or Element #anchor = 0 // anchor view to a fraction (0-1), Range, or Element
#justAnchored = false
#locked = false // while true, prevent any further navigation #locked = false // while true, prevent any further navigation
#styles #styles
#styleMap = new WeakMap() #styleMap = new WeakMap()
@@ -476,7 +477,10 @@ export class Paginator extends HTMLElement {
this.#observer.observe(this.#container) this.#observer.observe(this.#container)
this.#container.addEventListener('scroll', debounce(() => { this.#container.addEventListener('scroll', debounce(() => {
if (this.scrolled) this.#afterScroll('scroll') if (this.scrolled) {
if (this.#justAnchored) this.#justAnchored = false
else this.#afterScroll('scroll')
}
}, 250)) }, 250))
const opts = { passive: false } const opts = { passive: false }
@@ -805,6 +809,7 @@ export class Paginator extends HTMLElement {
const range = this.#getVisibleRange() const range = this.#getVisibleRange()
// don't set new anchor if relocation was to scroll to anchor // don't set new anchor if relocation was to scroll to anchor
if (reason !== 'anchor') this.#anchor = range if (reason !== 'anchor') this.#anchor = range
else this.#justAnchored = true
const index = this.#index const index = this.#index
const detail = { reason, range, index } const detail = { reason, range, index }