oreolek/phanpy
1
0
Fork 0
Code Activity

Replace scrollIntoViewIfNeeded with scrollIntoView

Browse source 
Because non-standard and not supported on Firefox
This commit is contained in:
Lim Chee Aun 2023-10-04 21:24:48 +08:00
parent ddd1ec5819
commit 5faf911b17
2 changed files with 20 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/timeline.jsx
View file

@ -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);
}
}
});

14
src/pages/status.jsx
View file

@ -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);
}
}
});