### Start Development Server

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/README.md

Run the development server to start working on the project. Visit http://localhost:3000 to view the application.

```bash
pnpm dev
```

--------------------------------

### Obtain Scroll Container Reference in Setup

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.md

Declare a `ref` in your Vue setup function to get a direct reference to the scrollable DOM element added in the template.

```javascript
const scrollContainer = ref(null)
```

--------------------------------

### Clone Project with Tiged

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/README.md

Clone the project template locally using tiged. Ensure pnpm is installed or install it first.

```bash
pnpm dlx tiged vue-zone/vue3-vant-mobile my-mobile-app # If you don't have pnpm installed, run: npm install -g pnpm
cd my-mobile-app
pnpm i
```

--------------------------------

### Save and Restore Specific Scroll Container Position

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.zh-CN.md

This snippet demonstrates how to save and restore the scroll position of a specific DOM element. It requires a `ref` on the scrollable element in the template and in the setup function.

```html
<div ref="scrollContainer" class="...">...</div>
```

```javascript
const scrollContainer = ref(null)
```

```javascript
onBeforeRouteLeave(() => {
  if (scrollContainer.value) {
    scrollTop.value = scrollContainer.value.scrollTop
  }
})
```

```javascript
onActivated(() => {
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = scrollTop.value
  }
})
```

--------------------------------

### Build Application

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/README.md

Build the application for production. The generated files will be placed in the 'dist' directory, ready for serving.

```bash
pnpm build
```

--------------------------------

### Detect and Apply Dark Mode

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/index.html

This script automatically detects the user's preferred color scheme and applies the 'dark' class to the document element if dark mode is preferred or explicitly set. It checks both system preferences and local storage settings.

```javascript
(function () { const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'; if (setting === 'dark' || (prefersDark && setting !== 'light')) document.documentElement.classList.toggle('dark', true); })()
```

--------------------------------

### Save and Restore Window Scroll Position

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.md

Use this approach to cache the component with `keepAlive: true`, save the window's scroll position before leaving the route using `onBeforeRouteLeave`, and restore it when the component is activated using `onActivated`.

```javascript
// 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
})
```

--------------------------------

### Save and Restore Window Scroll Position

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.zh-CN.md

Use this snippet to save the window's scroll position when leaving a route and restore it when the component is activated. Ensure `keepAlive` is enabled for the component.

```javascript
const scrollTop = ref(0)

onActivated(() => {
  window.scrollTo(0, scrollTop.value)
})

onBeforeRouteLeave(() => {
  scrollTop.value
    = window.scrollY
      || document.documentElement.scrollTop
      || document.body.scrollTop
})
```

--------------------------------

### Save Specific Scroll Container Position

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.md

Within the `onBeforeRouteLeave` hook, check if the `scrollContainer` ref is available and then save its `scrollTop` property to a variable. This ensures the scroll position of the specific element is preserved.

```javascript
onBeforeRouteLeave(() => {
  if (scrollContainer.value) {
    scrollTop.value = scrollContainer.value.scrollTop
  }
})
```

--------------------------------

### Add Ref to Scroll Container in Template

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.md

In your Vue template, add a `ref` attribute to the specific HTML element that you want to track scroll position for. This allows you to reference the element in your script.

```html
<div ref="scrollContainer" class="...">...</div>
```

--------------------------------

### Restore Specific Scroll Container Position

Source: https://github.com/vue-zone/vue3-vant-mobile/blob/main/src/pages/scroll-cache/README.md

In the `onActivated` hook, verify that the `scrollContainer` ref exists and then set its `scrollTop` property to the previously saved value. This restores the scroll position of the specific element when the component is re-activated.

```javascript
onActivated(() => {
  if (scrollContainer.value) {
    scrollContainer.value.scrollTop = scrollTop.value
  }
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.