docs: add scroll-cache md

Author: LostElkByte

src/pages/scroll-cache/README.md

@@ -0,0 +1,79 @@
+# Page Scroll Position Save and Restore Guide
+
+If you want to save the current scroll position when leaving a page and restore it upon return, you can follow the approach outlined below.
+
+## Basic Approach
+
+1. **Cache the Component**:
+   Set `keepAlive` to `true` to cache the component.
+
+2. **Save Scroll Position**:
+   Use the `onBeforeRouteLeave` hook to save the current scroll position when leaving the page.
+
+3. **Restore Scroll Position**:
+   Use the `onActivated` hook to restore the last saved scroll position when the page is activated.
+
+## Example Code
+
+```js
+// Define a ref to store the scroll position
+const scrollTop = ref(0)
+
+// When a component with keepAlive set to true is activated, scroll to the saved position
+onActivated(() => {
+  window.scrollTo(0, scrollTop.value)
+})
+
+// Before leaving the route, save the current scroll position
+onBeforeRouteLeave(() => {
+  scrollTop.value
+    = window.scrollY
+      || document.documentElement.scrollTop
+      || document.body.scrollTop
+})
+```
+
+# Handling a Specific Scroll Container
+
+If you need to save and restore the scroll position for a specific element (instead of the entire window), follow these steps:
+
+## 1. Add a ref in the Template
+
+In your template, add a `ref` attribute to the scroll container element. For example:
+
+```html
+<div ref="scrollContainer" class="...">...</div>
+
+```
+
+## 2. In the setup Function
+
+Use a ref to obtain the element's reference:
+
+```js
+const scrollContainer = ref(null)
+```
+
+## 3. In the onBeforeRouteLeave Hook
+
+Save the scroll container's scroll position:
+
+```js
+onBeforeRouteLeave(() => {
+  if (scrollContainer.value) {
+    scrollTop.value = scrollContainer.value.scrollTop
+  }
+})
+```
+
+## 3. In the onActivated Hook
+
+Restore the scroll container's scroll position:
+
+```js
+onActivated(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = scrollTop.value
+  }
+})
+```

src/pages/scroll-cache/README.zh-CN.md

@@ -0,0 +1,80 @@
+# 页面滚动位置保存与恢复指南
+
+如果你希望在离开页面时保存当前的滚动位置，并在返回时恢复它，可以参考下面的实现思路：
+
+## 基本思路
+
+1. **缓存组件**：
+   设置 `keepAlive` 为 `true` 以缓存组件。
+
+2. **保存滚动位置**：
+   在页面离开时，使用 `onBeforeRouteLeave` 钩子保存当前滚动位置。
+
+3. **恢复滚动位置**：
+   在页面激活时，使用 `onActivated` 钩子恢复上次的滚动位置。
+
+## 示例代码
+
+```js
+// 定义一个 ref 用于存储滚动位置
+const scrollTop = ref(0)
+
+// 当 keepAlive 为 true 的组件被激活时，滚动到保存的位置
+onActivated(() => {
+  window.scrollTo(0, scrollTop.value)
+})
+
+// 在路由离开前，保存当前的滚动位置
+onBeforeRouteLeave(() => {
+  scrollTop.value
+    = window.scrollY
+      || document.documentElement.scrollTop
+      || document.body.scrollTop
+})
+```
+
+# 针对指定滚动容器的处理
+
+如果你需要对特定元素（而非整个窗口）进行滚动位置的保存和恢复，可按以下步骤操作：
+
+## 1. 在 Template 中添加 ref
+
+在模板中，给滚动容器元素添加 `ref` 属性。例如：
+
+```html
+<div ref="scrollContainer" class="...">...</div>
+```
+
+## 2. 在 setup 中：
+
+使用 ref 获取该元素的引用：
+
+```js
+const scrollContainer = ref(null)
+```
+
+## 3. 在 onBeforeRouteLeave 钩子中：
+
+保存滚动容器的滚动位置：
+
+```js
+onBeforeRouteLeave(() => {
+  if (scrollContainer.value) {
+    scrollTop.value = scrollContainer.value.scrollTop
+  }
+})
+```
+
+## 3. 在 onActivated 钩子中：
+
+恢复滚动容器的滚动位置：
+
+```js
+onActivated(() => {
+  if (scrollContainer.value) {
+    scrollContainer.value.scrollTop = scrollTop.value
+  }
+})
+```
+
+万事 OK 👌🏻