feat: reposition btns when scrolling
This commit is contained in:
parent
c01d797983
commit
047fbf06b6
36
src/btn.ts
36
src/btn.ts
|
@ -49,6 +49,14 @@ const cloneBtn = (btn: HTMLButtonElement) => {
|
||||||
return n
|
return n
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getScrollParent (node: HTMLElement): HTMLElement {
|
||||||
|
if (node.scrollHeight > node.clientHeight) {
|
||||||
|
return node
|
||||||
|
} else {
|
||||||
|
return getScrollParent(node.parentNode as HTMLElement)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
interface BtnOptions {
|
interface BtnOptions {
|
||||||
readonly name: string;
|
readonly name: string;
|
||||||
readonly action: BtnAction;
|
readonly action: BtnAction;
|
||||||
|
@ -104,13 +112,10 @@ export class BtnList {
|
||||||
return btnTpl
|
return btnTpl
|
||||||
}
|
}
|
||||||
|
|
||||||
private _positionBtns (newParent: HTMLDivElement) {
|
private _positionBtns (anchorDiv: HTMLDivElement, newParent: HTMLDivElement) {
|
||||||
try {
|
const { top } = anchorDiv.getBoundingClientRect()
|
||||||
const anchorDiv = this.getBtnParent()
|
if (top > 0) {
|
||||||
const { top } = anchorDiv.getBoundingClientRect()
|
|
||||||
newParent.style.top = `${top}px`
|
newParent.style.top = `${top}px`
|
||||||
} catch (err) {
|
|
||||||
console.error(err)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -131,10 +136,21 @@ export class BtnList {
|
||||||
newParent.append(...this.list.map(e => cloneBtn(e)))
|
newParent.append(...this.list.map(e => cloneBtn(e)))
|
||||||
shadow.append(newParent)
|
shadow.append(newParent)
|
||||||
|
|
||||||
const pos = () => this._positionBtns(newParent)
|
try {
|
||||||
pos()
|
const anchorDiv = this.getBtnParent()
|
||||||
document.addEventListener('readystatechange', pos)
|
const pos = () => this._positionBtns(anchorDiv, newParent)
|
||||||
window.addEventListener('resize', pos)
|
pos()
|
||||||
|
document.addEventListener('readystatechange', pos)
|
||||||
|
|
||||||
|
// reposition btns when window resizes
|
||||||
|
window.addEventListener('resize', pos)
|
||||||
|
|
||||||
|
// reposition btns when scrolling
|
||||||
|
const scroll = getScrollParent(anchorDiv)
|
||||||
|
scroll.addEventListener('scroll', pos)
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
|
||||||
return btnParent
|
return btnParent
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue