ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "auto show: Use textarea as the anchor element if available (#2407)"

Browse Source 
This reverts commit 1379c419df836e064d0a3f904442a7af9c4b5842.
This commit is contained in:
k00b 2025-08-09 18:19:34 -05:00
parent 3c637e5ec2
commit 438b5041f1
1 changed files with 23 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
components/preserve-scroll.js
View File

@ -8,57 +8,26 @@ export default function preserveScroll (callback) {
return return
} }
// check if a ref element is in the viewport // get a reference element at the center of the viewport to track if content is added above it
const isElementInViewport = (element) => { const ref = document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2)
if (!element?.getBoundingClientRect) return false const refTop = ref ? ref.getBoundingClientRect().top + scrollTop : scrollTop
const rect = element.getBoundingClientRect()
return (
rect.bottom > 0 &&
rect.right > 0 &&
rect.top < window.innerHeight &&
rect.left < window.innerWidth
)
}
// pick a textarea element to use as anchor ref, if any
const selectTextarea = () => {
// pick the focused textarea, if any
const active = document.activeElement
if (active && active.tagName === 'TEXTAREA' && isElementInViewport(active)) {
return active
}
// if no textarea is focused, check if there are any in the viewport
const textareas = document.querySelectorAll('textarea')
for (const textarea of textareas) {
if (isElementInViewport(textarea)) {
return textarea
}
}
return null
}
// if no textarea is found, use the center of the viewport as fallback anchor
const anchorRef = selectTextarea() || document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2)
const refTop = anchorRef ? anchorRef.getBoundingClientRect().top + scrollTop : scrollTop
// observe the document for changes in height // observe the document for changes in height
const observer = new window.MutationObserver(() => { const observer = new window.MutationObserver(() => {
// request animation frame to ensure the DOM is updated
window.requestAnimationFrame(() => {
// we can't proceed if we couldn't find a traceable reference element
if (!ref) {
cleanup() cleanup()
return
}
// double rAF to ensure the DOM is updated - textareas are rendered on the next tick // get the new position of the reference element along with the new scroll position
window.requestAnimationFrame(() => { const newRefTop = ref ? ref.getBoundingClientRect().top + window.scrollY : window.scrollY
window.requestAnimationFrame(() => { // has the reference element moved?
if (!anchorRef) return
// get the new position of the anchor ref along with the new scroll position
const newRefTop = anchorRef ? anchorRef.getBoundingClientRect().top + window.scrollY : window.scrollY
// has the anchor ref moved?
const refMoved = newRefTop - refTop const refMoved = newRefTop - refTop
// if the anchor ref moved, we need to scroll to the new position // if the reference element moved, we need to scroll to the new position
if (refMoved > 0) { if (refMoved > 0) {
window.scrollTo({ window.scrollTo({
// some browsers don't respond well to fractional scroll position, so we round up the new position to the nearest integer // some browsers don't respond well to fractional scroll position, so we round up the new position to the nearest integer
@ -66,7 +35,8 @@ export default function preserveScroll (callback) {
behavior: 'instant' behavior: 'instant'
}) })
} }
})
cleanup()
}) })
}) })