diff --git a/src/components/timeline.jsx b/src/components/timeline.jsx index d4ac2f19..8ec6cd95 100644 --- a/src/components/timeline.jsx +++ b/src/components/timeline.jsx @@ -17,6 +17,12 @@ import Link from './link'; import NavMenu from './nav-menu'; import Status from './status'; +const scrollIntoViewOptions = { + block: 'nearest', + inline: 'center', + behavior: 'smooth', +}; + function Timeline({ title, titleComponent, @@ -111,7 +117,7 @@ function Timeline({ } if (nextItem) { nextItem.focus(); - nextItem.scrollIntoViewIfNeeded?.(); + nextItem.scrollIntoView(scrollIntoViewOptions); } } else { // If active status is not in viewport, get the topmost status-link in viewport @@ -121,7 +127,7 @@ function Timeline({ }); if (topmostItem) { topmostItem.focus(); - topmostItem.scrollIntoViewIfNeeded?.(); + topmostItem.scrollIntoView(scrollIntoViewOptions); } } }); @@ -150,7 +156,7 @@ function Timeline({ } if (prevItem) { prevItem.focus(); - prevItem.scrollIntoViewIfNeeded?.(); + prevItem.scrollIntoView(scrollIntoViewOptions); } } else { // If active status is not in viewport, get the topmost status-link in viewport @@ -160,7 +166,7 @@ function Timeline({ }); if (topmostItem) { topmostItem.focus(); - topmostItem.scrollIntoViewIfNeeded?.(); + topmostItem.scrollIntoView(scrollIntoViewOptions); } } }); diff --git a/src/pages/status.jsx b/src/pages/status.jsx index 7719088f..c4165c7c 100644 --- a/src/pages/status.jsx +++ b/src/pages/status.jsx @@ -54,6 +54,12 @@ function resetScrollPosition(id) { delete scrollPositions[id]; } +const scrollIntoViewOptions = { + block: 'nearest', + inline: 'center', + behavior: 'smooth', +}; + function StatusPage(params) { const { id } = params; const { masto, instance } = api({ instance: params.instance }); @@ -555,7 +561,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { let nextStatus = allStatusLinks[activeStatusIndex + 1]; if (nextStatus) { nextStatus.focus(); - nextStatus.scrollIntoViewIfNeeded?.(); + nextStatus.scrollIntoView(scrollIntoViewOptions); } } else { // If active status is not in viewport, get the topmost status-link in viewport @@ -565,7 +571,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { }); if (topmostStatusLink) { topmostStatusLink.focus(); - topmostStatusLink.scrollIntoViewIfNeeded?.(); + topmostStatusLink.scrollIntoView(scrollIntoViewOptions); } } }); @@ -589,7 +595,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { let prevStatus = allStatusLinks[activeStatusIndex - 1]; if (prevStatus) { prevStatus.focus(); - prevStatus.scrollIntoViewIfNeeded?.(); + prevStatus.scrollIntoView(scrollIntoViewOptions); } } else { // If active status is not in viewport, get the topmost status-link in viewport @@ -599,7 +605,7 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) { }); if (topmostStatusLink) { topmostStatusLink.focus(); - topmostStatusLink.scrollIntoViewIfNeeded?.(); + topmostStatusLink.scrollIntoView(scrollIntoViewOptions); } } });