feat: add autoScrollToCenter settings option

src/SettingTab.tsx

@@ -120,6 +120,7 @@ export class SettingTab extends PluginSettingTab {
 		this._initToggleSetting("showViewModeDisplay");
 		this._initToggleSetting("highlightActionBar");
 		this._initToggleSetting("autoHideActionBar");
+		this._initToggleSetting("autoScrollToCenter");
 	}
 
 	initFolderAndFileBehaviorSettings() {

src/components/File/Content.tsx

@@ -5,7 +5,10 @@ import { useShallow } from "zustand/react/shallow";
 
 import { CLICKABLE_TREE_ITEM_CLASS_NAME } from "src/assets/constants";
 import { useExplorer } from "src/hooks/useExplorer";
-import { useShowFileItemDivider } from "src/hooks/useSettingsHandler";
+import {
+	useAutoScrollToCenter,
+	useShowFileItemDivider,
+} from "src/hooks/useSettingsHandler";
 import { FILE_OPERATION_COPY } from "src/locales";
 import { ExplorerStore } from "src/store";
 import {
@@ -65,6 +68,9 @@ const FileContent = ({ file }: FileProps) => {
 	const { showFileItemDivider } = useShowFileItemDivider(
 		settings.showFileItemDivider
 	);
+	const { autoScrollToCenter } = useAutoScrollToCenter(
+		settings.autoScrollToCenter
+	);
 
 	const nameRef = useRef<NameRef>(null);
 
@@ -158,7 +164,7 @@ const FileContent = ({ file }: FileProps) => {
 
 	return (
 		<ScrollInToViewContainer
-			needToScroll={isFocused}
+			needToScroll={isFocused && autoScrollToCenter}
 			className={getClassNames()}
 			onContextMenu={onShowContextMenu}
 			onClick={onClickFile}

src/components/TogglableContainer.tsx

@@ -1,7 +1,10 @@
 import { HTMLAttributes, MouseEvent, ReactNode, RefObject } from "react";
 
 import { useExplorer } from "src/hooks/useExplorer";
-import { useExpandNodeByClick } from "src/hooks/useSettingsHandler";
+import {
+	useAutoScrollToCenter,
+	useExpandNodeByClick,
+} from "src/hooks/useSettingsHandler";
 import { EXPAND_NODE_ON_CLICK } from "src/settings";
 import { AsyncNoop, Noop } from "src/utils";
 
@@ -26,9 +29,13 @@ const TogglableContainer = ({
 	...props
 }: Props) => {
 	const { plugin } = useExplorer();
+	const { settings } = plugin;
 
 	const { expandNodeByClick } = useExpandNodeByClick(
-		plugin.settings.expandNodeOnClick
+		settings.expandNodeOnClick
+	);
+	const { autoScrollToCenter } = useAutoScrollToCenter(
+		settings.autoScrollToCenter
 	);
 
 	const onClickContent = async (e: MouseEvent) => {
@@ -58,7 +65,7 @@ const TogglableContainer = ({
 
 	return (
 		<ScrollInToViewContainer
-			needToScroll={isFocused}
+			needToScroll={isFocused && autoScrollToCenter}
 			onClick={onClickContent}
 			{...props}
 		>

src/hooks/useSettingsHandler/index.tsx

@@ -1,4 +1,5 @@
 import { useAutoHideActionBar } from "./useAutoHideActionBar";
+import { useAutoScrollToCenter } from "./useAutoScrollToCenter";
 import { useBoldFileTitle } from "./useBoldFileTitle";
 import { useDeduplicateTagFiles } from "./useDeduplicateTagFiles";
 import { useExpandNodeByClick } from "./useExpandNodeByClick";
@@ -49,5 +50,6 @@ export {
 	useExpandNodeByClick,
 	useDeduplicateTagFiles,
 	useShowViewModeDisplay,
-	useFilePreviewLinesCount
+	useFilePreviewLinesCount,
+	useAutoScrollToCenter,
 };

src/hooks/useSettingsHandler/useAutoScrollToCenter.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import { useWatchSettingsChange } from "./useWatchSettingsChange";
+
+export const useAutoScrollToCenter = (
+	defaultAutoScroll: boolean
+): { autoScrollToCenter: boolean } => {
+	const [autoScroll, setAutoScroll] = useState(defaultAutoScroll);
+
+	const onChangeAutoScroll = (event: CustomEvent) => {
+		const { changeKey, changeValue } = event.detail;
+		if (changeKey == "autoScrollToCenter") {
+			setAutoScroll(changeValue);
+		}
+	};
+
+	useWatchSettingsChange(onChangeAutoScroll);
+
+	return { autoScrollToCenter: autoScroll };
+};

src/locales/settings.ts

@@ -132,6 +132,16 @@ export const LAYOUT_SETTINGS_COPY: SettingsLocaleResource<LayoutSettings> = {
 			desc: "启用后，顶部操作栏默认隐藏，鼠标悬停时才会显示。",
 		},
 	},
+	autoScrollToCenter: {
+		en: {
+			name: "Auto scroll selected item into center",
+			desc: "When enabled, clicking a folder, tag, or file will automatically scroll the selected item into the center of the view. Disable this to prevent automatic repositioning.",
+		},
+		zh: {
+			name: "自动滚动到视图中心",
+			desc: "启用后，在文件夹、标签或文件列表中点击项目时，会自动将该项目滚动到视图中间。关闭此选项可禁止该自动滚动行为。",
+		},
+	},
 };
 
 export const FOLDER_AND_TAG_BEHAVIOR_SETTINGS_COPY: SettingsLocaleResource<FolderAndTagBehaviorSettings> =

src/settings.ts

@@ -46,6 +46,7 @@ export type LayoutSettings = {
 	showViewModeDisplay: boolean;
 	highlightActionBar: boolean;
 	autoHideActionBar: boolean;
+	autoScrollToCenter: boolean;
 };
 export type FolderAndTagBehaviorSettings = {
 	showFolderHierarchyLines: boolean;
@@ -103,6 +104,7 @@ export const LAYOUT_SETTINGS: LayoutSettings = {
 	showViewModeDisplay: true,
 	highlightActionBar: false,
 	autoHideActionBar: false,
+	autoScrollToCenter: true,
 };
 
 export const FOLDER_AND_TAG_BEHAVIOR_SETTINGS: FolderAndTagBehaviorSettings = {