diff --git a/src-ui/app/config_page/setting_section/SettingSection.jsx b/src-ui/app/config_page/setting_section/SettingSection.jsx index c39e6221..b70b7763 100644 --- a/src-ui/app/config_page/setting_section/SettingSection.jsx +++ b/src-ui/app/config_page/setting_section/SettingSection.jsx @@ -2,14 +2,22 @@ import { useRef, useLayoutEffect, useEffect } from "react"; import styles from "./SettingSection.module.scss"; import { SettingBox } from "./setting_box/SettingBox"; -import { store } from "@store"; +import { store, useStore_SelectedConfigTabId } from "@store"; +import { useSettingBoxScrollPosition } from "@logics_configs"; export const SettingSection = () => { + const { currentSelectedConfigTabId } = useStore_SelectedConfigTabId(); + const { resetScrollPosition } = useSettingBoxScrollPosition(); const scrollContainerRef = useRef(null); + useLayoutEffect(() => { store.setting_box_scroll_container = scrollContainerRef; }, []); + useEffect(() => { + resetScrollPosition(); + }, [currentSelectedConfigTabId.data]); + return (
diff --git a/src-ui/logics/configs/useSettingBoxScrollPosition.js b/src-ui/logics/configs/useSettingBoxScrollPosition.js index c0a19b98..87d8365c 100644 --- a/src-ui/logics/configs/useSettingBoxScrollPosition.js +++ b/src-ui/logics/configs/useSettingBoxScrollPosition.js @@ -9,19 +9,25 @@ export const useSettingBoxScrollPosition = () => { } }; const restoreScrollPosition = () => { - if (store.setting_box_scroll_container.current) { updateSettingBoxScrollPosition((pre) => { store.setting_box_scroll_container.current.scrollTop = pre.data; return pre.data; }) } - }; + const resetScrollPosition = () => { + if (store.setting_box_scroll_container.current) { + store.setting_box_scroll_container.current.scrollTop = 0; + updateSettingBoxScrollPosition(0); + } + } + return { saveScrollPosition, restoreScrollPosition, + resetScrollPosition, currentSettingBoxScrollPosition, updateSettingBoxScrollPosition, };