diff --git a/src/common/component/Message/ReactionPicker.tsx b/src/common/component/Message/ReactionPicker.tsx index ac9beaed..a1089e01 100644 --- a/src/common/component/Message/ReactionPicker.tsx +++ b/src/common/component/Message/ReactionPicker.tsx @@ -19,6 +19,13 @@ const ReactionPicker: FC = ({ mid, hidePicker }) => { const handleReact = (emoji: string) => { reactMessage({ mid, action: emoji }); hidePicker(); + // scroll in to view + const el = document.querySelector(`[data-msg-mid='${mid}']`); + // console.log("eee", el); + if (el) { + el.scrollIntoViewIfNeeded(false); + } + }; return (
diff --git a/src/common/polyfills.js b/src/common/polyfills.js new file mode 100644 index 00000000..c2bab874 --- /dev/null +++ b/src/common/polyfills.js @@ -0,0 +1,18 @@ +// scrollIntoViewIfNeeded +const isSupported = "scrollIntoViewIfNeeded" in Element.prototype; +if (!isSupported) { + Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) { + const el = this; + new IntersectionObserver(function ([entry]) { + const ratio = entry.intersectionRatio; + if (ratio < 1) { + let place = ratio <= 0 && centerIfNeeded ? "center" : "nearest"; + el.scrollIntoView({ + block: place, + inline: place + }); + } + this.disconnect(); + }).observe(this); + }; +} diff --git a/src/index.tsx b/src/index.tsx index a8516bb6..28acd7fa 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,6 +14,7 @@ import ReduxRoutes from "./routes"; import NewVersion from "./common/component/NewVersion"; // import i18n (needs to be bundled ;)) import './i18n'; +import './common/polyfills'; import { isDarkMode } from './common/utils'; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); diff --git a/src/types/global.d.ts b/src/types/global.d.ts index f994b662..ffd3f086 100644 --- a/src/types/global.d.ts +++ b/src/types/global.d.ts @@ -42,5 +42,8 @@ export declare global { interface WindowEventMap { beforeinstallprompt: BeforeInstallPromptEvent; } + interface Element { + scrollIntoViewIfNeeded?: any; + } } export type ShareScreenTrack = ILocalVideoTrack | [ILocalVideoTrack, ILocalAudioTrack];