### Install Vuescroll with npm or yarn

Source: https://github.com/yvescoding/vuescroll/blob/dev/README.md

Use npm or yarn to add Vuescroll to your project dependencies.

```bash
npm i vuescroll -S
```

```bash
yarn add vuescroll
```

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

### Register Vuescroll as a Vue 3 Plugin

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Install and register Vuescroll globally with custom configuration options during the Vue application initialization.

```javascript
// Installation via npm
// npm install vuescroll

// Vue 3.x Setup
import { createApp } from 'vue';
import vuescroll from 'vuescroll';
import App from './App.vue';

const app = createApp(App);

// Register with global configuration options
app.use(vuescroll, {
  ops: {
    bar: {
      background: '#03b976',
      opacity: 0.8
    },
    rail: {
      size: '8px'
    }
  },
  name: 'vue-scroll' // Custom component name (default: vueScroll)
});

app.mount('#app');
```

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

### getCurrentviewDom Method

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Get an array of DOM elements currently visible in the viewport. This is useful for implementing features like lazy loading or tracking visible content.

```APIDOC
## getCurrentviewDom Method

### Description
Get an array of DOM elements currently visible in the viewport. Useful for lazy loading or tracking visible content.

### Method
`getCurrentviewDom()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const vs = this.$refs.vs;
const visibleElements = vs.getCurrentviewDom();
console.log('Visible elements:', visibleElements);
```

### Response
#### Success Response (200)
- **visibleElements** (Array<HTMLElement>) - An array containing the DOM elements currently within the viewport.
```

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

### Event Handling

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Hooks for tracking scroll progress, completion, and container resizing.

```APIDOC
## Event Hooks

### Description
Listen to lifecycle and interaction events emitted by the vuescroll component.

### Events
- **@handle-scroll**: Emitted during scrolling. Provides vertical/horizontal objects containing scrollTop/scrollLeft, process (0-1), and scrollDirection.
- **@handle-scroll-complete**: Emitted when a scroll animation finishes.
- **@handle-resize**: Emitted when the content or container dimensions change.
- **@refresh-status**: Emitted during refresh lifecycle stages (beforeRefresh, startRefresh, refreshing, refreshDone).
```

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

### Implement Zooming Functionality

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Configures the component in slide mode with pinch-to-zoom and programmatic zoom controls. Requires the component to be wrapped in a container with defined dimensions.

```html
<template>
  <div class="zoom-container" style="height: 500px; width: 500px;">
    <vue-scroll :ops="zoomOptions" ref="zoomable">
      <img src="large-image.jpg" style="width: 1000px; height: 1000px;" />
    </vue-scroll>
    <div class="zoom-controls">
      <button @click="zoomIn">Zoom In (+)</button>
      <button @click="zoomOut">Zoom Out (-)</button>
      <button @click="resetZoom">Reset (1x)</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zoomOptions: {
        vuescroll: {
          mode: 'slide',
          zooming: true,
          scroller: {
            minZoom: 0.5,
            maxZoom: 4,
            bouncing: { top: 50, bottom: 50, left: 50, right: 50 }
          }
        }
      }
    };
  },
  methods: {
    // Zoom to specific level
    zoomTo(level, animate = true) {
      this.$refs.zoomable.zoomTo(level, animate);
    },
    // Zoom by factor (relative zoom)
    zoomBy(factor, animate = true) {
      // originLeft, originTop define zoom center point
      this.$refs.zoomable.zoomBy(factor, animate, null, null, () => {
        console.log('Zoom complete');
      });
    },
    zoomIn() {
      this.zoomBy(1.5, true);
    },
    zoomOut() {
      this.zoomBy(0.67, true);
    },
    resetZoom() {
      this.zoomTo(1, true);
    }
  }
};
</script>
```

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

### Initialize vuescroll with custom configuration

Source: https://github.com/yvescoding/vuescroll/blob/dev/examples/base-scroll.html

Configures vuescroll behavior, scroll buttons, and scrollbar appearance within a Vue 3 application instance.

```javascript
Vue.createApp({ data() { return { ops: { vuescroll: { checkShiftKey: true, locking: false // deltaPercent: 0.75 }, scrollButton: { enable: true, background: 'rgb(3, 185, 118)', opacity: 1, step: 180, mousedownStep: 30 }, bar: { opacity: '0.5', background: 'blue' } } }; } }) .use(vuescroll) .mount('#app');
```

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

### Implement Slide Mode with Pull-to-Refresh and Push-to-Load

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Configures Vuescroll in slide mode with custom refresh and load tips. Requires handling lifecycle events to fetch data and trigger UI updates.

```html
<template>
  <div class="container" style="height: 100vh;">
    <vue-scroll
      :ops="slideOptions"
      ref="vs"
      @refresh-activate="onRefreshActivate"
      @refresh-before-deactivate="onRefreshBeforeDeactivate"
      @load-activate="onLoadActivate"
      @load-before-deactivate="onLoadBeforeDeactivate"
    >
      <div class="content">
        <div v-for="item in items" :key="item.id" class="item">
          {{ item.text }}
        </div>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      slideOptions: {
        vuescroll: {
          mode: 'slide',
          pullRefresh: {
            enable: true,
            tips: {
              deactive: 'Pull to Refresh',
              active: 'Release to Refresh',
              start: 'Refreshing...',
              beforeDeactive: 'Refresh Successfully!'
            }
          },
          pushLoad: {
            enable: true,
            auto: true,
            autoLoadDistance: 50,
            tips: {
              deactive: 'Push to Load More',
              active: 'Release to Load',
              start: 'Loading...',
              beforeDeactive: 'Load Successfully!'
            }
          },
          scroller: {
            bouncing: { top: 100, bottom: 100, left: 0, right: 0 },
            speedMultiplier: 1
          }
        }
      }
    };
  },
  methods: {
    async onRefreshActivate(vs, refreshDom) {
      // Fetch fresh data
      const newData = await this.fetchLatestData();
      this.items = newData;
    },
    onRefreshBeforeDeactivate(vs, refreshDom, done) {
      // Called after refresh completes, call done() to hide refresh UI
      setTimeout(done, 500);
    },
    async onLoadActivate(vs, loadDom) {
      // Load more data
      const moreData = await this.fetchMoreData();
      this.items.push(...moreData);
    },
    onLoadBeforeDeactivate(vs, loadDom, done) {
      setTimeout(done, 500);
    },
    // Programmatically trigger refresh or load
    triggerRefresh() {
      this.$refs.vs.triggerRefreshOrLoad('refresh');
    },
    triggerLoad() {
      this.$refs.vs.triggerRefreshOrLoad('load');
    }
  }
};
</script>
```

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

### Handle Scroll Events

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Hooks into scroll lifecycle events for tracking position, progress, or implementing infinite scroll logic.

```html
<template>
  <vue-scroll
    :ops="ops"
    @handle-scroll="onScroll"
    @handle-scroll-complete="onScrollComplete"
    @handle-resize="onResize"
    @refresh-status="onRefreshStatus"
  >
    <div class="content">...</div>
  </vue-scroll>
</template>

<script>
export default {
  methods: {
    onScroll(vertical, horizontal, nativeEvent) {
      // vertical/horizontal contain:
      // - scrollTop/scrollLeft: current position
      // - process: scroll progress (0 to 1)
      // - barSize: scrollbar thumb size
      // - scrollDirection: 'up', 'down', 'left', 'right'

      console.log('Vertical scroll:', {
        position: vertical.scrollTop,
        progress: Math.round(vertical.process * 100) + '%',
        direction: vertical.scrollDirection
      });

      // Infinite scroll detection
      if (vertical.process > 0.9) {
        this.loadMoreContent();
      }
    },
    onScrollComplete(vertical, horizontal) {
      console.log('Scroll animation completed at:', vertical.scrollTop);
    },
    onResize() {
      console.log('Content or container resized');
    },
    onRefreshStatus(status) {
      // Status: 'beforeRefresh', 'startRefresh', 'refreshing', 'refreshDone'
      console.log('Refresh status:', status);
    }
  }
};
</script>
```

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

### Scroll Control Methods (Native Mode)

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Control ongoing scroll animations with stop, pause, and continue methods. These are only available in native mode.

```APIDOC
## Scroll Control Methods (Native Mode)

### Description
Control ongoing scroll animations with stop, pause, and continue methods. Only available in native mode.

### Methods
- `stop()`: Stops the current scroll animation completely.
- `pause()`: Pauses the current scroll animation.
- `continue()`: Resumes a paused scroll animation.

### Endpoint
N/A (Instance Methods)

### Parameters
None

### Request Example
```javascript
const vs = this.$refs.vs;

// Start a scroll animation
vs.scrollTo({ y: '100%' }, 3000);

// Stop the animation
setTimeout(() => vs.stop(), 1000);

// Pause and resume animation
vs.scrollTo({ y: '100%' }, 5000);
setTimeout(() => {
  vs.pause();
  setTimeout(() => vs.continue(), 2000);
}, 1000);
```

### Response
N/A (These methods control animations and do not return a value.)
```

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

### Configure Scroll Buttons

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Enables navigation buttons at the ends of scrollbars. Ensure the rail gutter is configured to provide space for the buttons.

```javascript
const scrollButtonOptions = {
  scrollPanel: {
    scrollingX: true,
    scrollingY: true
  },
  scrollButton: {
    enable: true,
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    step: 180,          // Pixels to scroll per click
    mousedownStep: 30   // Pixels to scroll while holding button
  },
  bar: {
    background: '#03b976',
    keepShow: true
  },
  rail: {
    size: '10px',
    gutterOfEnds: '10px'  // Space for scroll buttons
  }
};

// Usage in template
// <vue-scroll :ops="scrollButtonOptions">...</vue-scroll>
```

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

### Create Carousel Paging with Slide Mode

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Enables paging in slide mode to create carousel-like behavior. Uses programmatic navigation methods to control page transitions.

```html
<template>
  <div class="carousel-container" style="height: 300px; width: 400px;">
    <vue-scroll :ops="pagingOptions" ref="carousel">
      <div class="slides" style="display: flex;">
        <div v-for="i in 5" :key="i" class="slide" style="width: 400px; height: 300px;">
          Slide {{ i }}
        </div>
      </div>
    </vue-scroll>
    <div class="controls">
      <button @click="prevPage">Previous</button>
      <span>Page {{ currentPage.x }} / 5</span>
      <button @click="nextPage">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: { x: 1, y: 1 },
      pagingOptions: {
        vuescroll: {
          mode: 'slide',
          paging: true,
          snapping: {
            enable: false
          },
          scroller: {
            bouncing: { top: 0, bottom: 0, left: 50, right: 50 }
          }
        },
        scrollPanel: {
          scrollingY: false,
          scrollingX: true
        }
      }
    };
  },
  methods: {
    getCurrentPage() {
      const page = this.$refs.carousel.getCurrentPage();
      this.currentPage = page;
      return page;
    },
    goToPage(x, y = 1, animate = true) {
      this.$refs.carousel.goToPage({ x, y }, animate);
      this.currentPage = { x, y };
    },
    nextPage() {
      const current = this.getCurrentPage();
      if (current.x < 5) {
        this.goToPage(current.x + 1);
      }
    },
    prevPage() {
      const current = this.getCurrentPage();
      if (current.x > 1) {
        this.goToPage(current.x - 1);
      }
    }
  }
};
</script>
```

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

### Static scrollTo Method

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Utility method to scroll any DOM element without a component wrapper.

```APIDOC
## Static Method: scrollTo

### Description
Scrolls a target DOM element to specific coordinates with easing support.

### Method
`vuescroll.scrollTo(element, x, y, speed, easing, animate, callback)`

### Parameters
- **element** (HTMLElement) - Required - The DOM element to scroll.
- **x** (number) - Required - Target horizontal position.
- **y** (number) - Required - Target vertical position.
- **speed** (number) - Optional - Duration in milliseconds.
- **easing** (string) - Optional - Easing function name (e.g., 'easeInOutQuad').
- **animate** (boolean) - Optional - Whether to animate the scroll.
- **callback** (function) - Optional - Function executed upon completion.
```

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

### Use Static scrollTo Method

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Programmatically scrolls any DOM element without requiring a vuescroll component instance.

```javascript
import vuescroll from 'vuescroll';

// Scroll the document/window
vuescroll.scrollTo(
  document,           // Element to scroll (document for window scroll)
  0,                  // x position
  500,                // y position
  300,                // speed (ms)
  'easeInOutQuad',    // easing function
  true,               // animate
  (x, y) => {         // callback when complete
    console.log('Scrolled to:', x, y);
  }
);

// Scroll a specific scrollable element
const scrollableDiv = document.getElementById('my-scrollable');
vuescroll.scrollTo(scrollableDiv, 0, 200, 500, 'easeOutCubic');

// Scroll to top of page smoothly
vuescroll.scrollTo(document, 0, 0, 400);
```

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

### Programmatic Scrolling with scrollTo

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Use the scrollTo method to move the scroll position to specific coordinates or percentages with optional easing.

```javascript
// Get reference to vuescroll instance
const vs = this.$refs.vs;

// Scroll to absolute position (pixels)
vs.scrollTo({ x: 0, y: 100 }, 300);

// Scroll to percentage position
vs.scrollTo({ x: '10%', y: '50%' }, 500, 'easeInOutQuad');

// Scroll to bottom
vs.scrollTo({ y: '100%' }, 300);

// Scroll to top instantly (speed = 0)
vs.scrollTo({ y: 0 }, 0);

// Available easing functions:
// 'easeInQuad', 'easeInOutQuad', 'easeInCubic', 'easeOutCubic',
// 'easeInOutCubic', 'easeInQuart', 'easeOutQuart', 'easeInOutQuart',
// 'easeInQuint', 'easeOutQuint', 'easeInOutQuint'
```

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

### Zooming Functionality

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Methods for controlling zoom levels programmatically in slide mode.

```APIDOC
## Zooming Methods

### Description
Provides programmatic control over the zoom level of the scrollable content.

### Methods
- **zoomTo(level, animate)**: Sets the zoom to a specific level (1 = 100%).
- **zoomBy(factor, animate, originLeft, originTop, callback)**: Adjusts zoom relative to the current level.

### Parameters
- **level** (number) - Required - The target zoom scale.
- **factor** (number) - Required - The multiplier for the current zoom level.
- **animate** (boolean) - Optional - Whether to animate the transition (default: true).
```

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

### Full Vuescroll Configuration Object

Source: https://context7.com/yvescoding/vuescroll/llms.txt

This object contains all available configuration options for Vuescroll, including default values for various settings like mode, sizeStrategy, and specific options for slide mode, scroll panels, rails, bars, and scroll buttons.

```javascript
const fullConfig = {
  vuescroll: {
    mode: 'native',              // 'native' or 'slide'
    sizeStrategy: 'percent',     // 'percent' or 'number'
    detectResize: true,          // Auto-detect content resize
    locking: true,               // Lock to main axis on slight movements

    // Slide mode specific options
    renderMethod: 'transform',   // 'transform' or 'position'
    pullRefresh: { enable: false, tips: { /* ... */ } },
    pushLoad: { enable: false, auto: false, autoLoadDistance: 0, tips: { /* ... */ } },
    paging: false,
    zooming: true,
    snapping: { enable: false, width: 100, height: 100 },
    scroller: {
      bouncing: { top: 100, bottom: 100, left: 100, right: 100 },
      minZoom: 0.5,
      maxZoom: 3,
      speedMultiplier: 1,
      penetrationDeceleration: 0.03,
      penetrationAcceleration: 0.08,
      preventDefault: false,
      disable: false
    }
  },
  scrollPanel: {
    initialScrollY: false,       // Initial Y scroll (pixels or '%')
    initialScrollX: false,       // Initial X scroll (pixels or '%')
    scrollingX: true,            // Enable horizontal scrolling
    scrollingY: true,            // Enable vertical scrolling
    speed: 300,                  // Animation duration (ms)
    easing: undefined,           // Default easing function
    verticalNativeBarPos: 'right', // 'right' or 'left'
    maxHeight: undefined,        // Max container height
    maxWidth: undefined          // Max container width
  },
  rail: {
    background: '#01a99a',
    opacity: 0,
    border: 'none',
    size: '6px',
    specifyBorderRadius: false,  // false or CSS value like '3px'
    gutterOfEnds: null,          // Space from ends
    gutterOfSide: '2px',         // Space from container edge
    keepShow: false              // Always show rail
  },
  bar: {
    showDelay: 500,              // Delay before hiding (ms)
    specifyBorderRadius: false,
    onlyShowBarOnScroll: true,   // Hide when not scrolling
    keepShow: false,             // Always show bar
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    size: '6px',
    minSize: 0,                  // Minimum bar size (0-1 as ratio)
    disable: false               // Disable scrollbar
  },
  scrollButton: {
    enable: false,
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    step: 180,                   // Click scroll amount
    mousedownStep: 30            // Hold scroll amount
  }
};
```

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

### Track Visible DOM Elements

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Identify elements currently within the viewport using getCurrentviewDom, ideal for lazy loading implementations.

```javascript
const vs = this.$refs.vs;

// Get currently visible elements
const visibleElements = vs.getCurrentviewDom();
console.log('Visible elements:', visibleElements);

// Example: Lazy load images when scrolling
function handleScroll() {
  const visibleItems = this.$refs.vs.getCurrentviewDom();
  visibleItems.forEach(el => {
    const img = el.querySelector('img[data-src]');
    if (img && !img.src) {
      img.src = img.dataset.src;
    }
  });
}
```

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

### Configure Rail Gutter

Source: https://github.com/yvescoding/vuescroll/blob/dev/CHANGELOG.MD

Sets the gutter spacing for the rail component. Note that 'gutter' was renamed to 'gutterOfEnds' in version 4.8.0.

```javascript
ops: {
  rail: {
    gutterOfEnds: '2px';
  }
}
```

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

### Define basic CSS styles for vuescroll container

Source: https://github.com/yvescoding/vuescroll/blob/dev/examples/base-scroll.html

Provides the base CSS layout for the scrollable container and its children.

```css
* { margin: 0; padding: 0; } .parent { width: 300px; height: 300px; background-color: red; margin: auto; } .child { width: 300px; height: 300px; line-height: 300px; text-align: center; } .title { text-align: center; margin-bottom: 50px; line-height: 40px; }
```

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

### Scroll Elements into View

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Bring a specific DOM element or CSS selector into the visible viewport area using scrollIntoView.

```javascript
const vs = this.$refs.vs;

// Scroll element into view using selector
vs.scrollIntoView('#target-element', true);

// Scroll element into view using DOM reference
const targetEl = document.getElementById('item-25');
vs.scrollIntoView(targetEl, true);

// Scroll into view without animation
vs.scrollIntoView('.highlighted-item', false);

// Useful for navigation menus or table of contents
function navigateToSection(sectionId) {
  this.$refs.vs.scrollIntoView(`#${sectionId}`, true);
}
```

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

### Control Scroll Animations in Native Mode

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Manage ongoing scroll animations using stop, pause, and continue. These methods are exclusive to native mode.

```javascript
const vs = this.$refs.vs;

// Start a long scroll animation
vs.scrollTo({ y: '100%' }, 3000);

// Stop the scroll animation completely
setTimeout(() => {
  vs.stop();
}, 1000);

// Pause and resume scroll animation
vs.scrollTo({ y: '100%' }, 5000);

setTimeout(() => {
  vs.pause();
  console.log('Scroll paused');

  setTimeout(() => {
    vs.continue();
    console.log('Scroll resumed');
  }, 2000);
}, 1000);
```

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

### refresh and refreshAll Methods

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Manually refresh the scrollbar state when content changes dynamically. `refreshAll` is used to refresh all vuescroll instances on the page.

```APIDOC
## refresh and refreshAll Methods

### Description
Manually refresh the scrollbar state when content changes dynamically. Use `refreshAll` to refresh all vuescroll instances on the page.

### Methods
- `refresh()`: Refreshes the scrollbar state for a single instance.
- `refreshAll()`: Refreshes the scrollbar state for all vuescroll instances on the page.

### Endpoint
N/A (Instance Method for `refresh`, Global method for `refreshAll`)

### Parameters
None

### Request Example
```javascript
// Refresh single instance after content changes
this.$nextTick(() => {
  this.$refs.vs.refresh();
});

// Refresh all vuescroll instances globally
vuescroll.refreshAll();
```

### Response
N/A (These methods do not return a value, they update the internal state.)
```

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

### Register Vuescroll globally for Vue 3.x

Source: https://github.com/yvescoding/vuescroll/blob/dev/README.md

Import and register the Vuescroll plugin globally in your Vue 3.x application. Global configurations can be set during the use of the plugin.

```javascript
import { createApp } from 'vue';
import vuescroll from 'vuescroll';

const app = createApp(App);

// You can set global config here.
app.use(vuescroll, {
  ops: {
    // The global config
  },
  name: 'myScroll' // customize component name, default -> vueScroll
});
```

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

### Configure Rail Border Radius

Source: https://github.com/yvescoding/vuescroll/blob/dev/CHANGELOG.MD

Sets a custom border-radius for the rail. Setting this to false allows vuescroll to adjust the radius automatically.

```javascript
ops: {
  rail: {
    specifyBorderRadius: '2px'; // Set false to let vuescroll to ajust automatically
  }
}
```

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

### Relative Scrolling with scrollBy

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Adjust the current scroll position by a relative delta using the scrollBy method.

```javascript
const vs = this.$refs.vs;

// Scroll down by 100 pixels
vs.scrollBy({ dy: 100 }, 300);

// Scroll up by 50 pixels
vs.scrollBy({ dy: -50 }, 300);

// Scroll right by 200 pixels
vs.scrollBy({ dx: 200 }, 300, 'easeOutCubic');

// Scroll diagonally
vs.scrollBy({ dx: 50, dy: 100 }, 400);

// Scroll by percentage
vs.scrollBy({ dy: '10%' }, 300);
```

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

### Implement Vuescroll in a Vue Template

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Wrap scrollable content with the vue-scroll component and define scroll options within the component data.

```html
<template>
  <div class="container" style="height: 400px;">
    <vue-scroll :ops="scrollOptions" ref="vs" @handle-scroll="handleScroll">
      <div class="content">
        <div v-for="item in 50" :key="item" class="item">
          Item {{ item }}
        </div>
      </div>
    </vue-scroll>
  </div>
</template>

<script>
export default {
  data() {
    return {
      scrollOptions: {
        vuescroll: {
          mode: 'native',
          sizeStrategy: 'percent',
          detectResize: true
        },
        scrollPanel: {
          initialScrollY: 0,
          scrollingX: false,
          scrollingY: true,
          speed: 300
        },
        bar: {
          showDelay: 500,
          onlyShowBarOnScroll: true,
          keepShow: false,
          background: '#03b976',
          opacity: 1,
          size: '6px'
        },
        rail: {
          background: '#01a99a',
          opacity: 0,
          size: '6px',
          gutterOfSide: '2px'
        }
      }
    };
  },
  methods: {
    handleScroll(vertical, horizontal, nativeEvent) {
      console.log('Scroll position:', vertical.scrollTop, horizontal.scrollLeft);
      console.log('Scroll progress:', vertical.process, horizontal.process);
    }
  }
};
</script>
```

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

### Wrap content with vue-scroll component

Source: https://github.com/yvescoding/vuescroll/blob/dev/README.md

Use the `<vue-scroll>` component to wrap the content for which you want to apply custom scrollbars.

```html
<div class="container">
  <vue-scroll>
    <div class="content"></div>
  </vue-scroll>
</div>
```

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

### Scrolling Times Tracking

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Track and reset the number of times the user has scrolled within the component.

```APIDOC
## Scrolling Times Tracking

### Description
Track and reset the number of times the user has scrolled within the component.

### Methods
- `getScrollingTimes()`: Returns the total count of scroll actions.
- `clearScrollingTimes()`: Resets the scroll counter to zero.

### Endpoint
N/A (Instance Methods)

### Parameters
None

### Request Example
```javascript
const vs = this.$refs.vs;

// Get total scroll count
const times = vs.getScrollingTimes();
console.log('User has scrolled', times, 'times');

// Reset scroll counter
vs.clearScrollingTimes();
```

### Response
#### Success Response (200) for `getScrollingTimes()`
- **times** (number) - The total number of scroll actions performed.
```

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

### Refresh Vuescroll Instances

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Manually trigger a refresh after dynamic content changes or window resizing to ensure scrollbars are accurate.

```javascript
import vuescroll from 'vuescroll';

// Refresh single instance after content changes
async function loadMoreContent() {
  await fetchData();
  this.items.push(...newItems);

  // Wait for DOM update then refresh
  this.$nextTick(() => {
    this.$refs.vs.refresh();
  });
}

// Refresh all vuescroll instances globally
function refreshAllScrollbars() {
  vuescroll.refreshAll();
}

// Useful after dynamic content loading or resize
window.addEventListener('resize', () => {
  vuescroll.refreshAll();
});
```

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

### getPosition Method

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Retrieves the current scroll position, including scrollTop and scrollLeft values, useful for tracking scroll state and implementing features like saving/restoring scroll positions.

```APIDOC
## getPosition Method

### Description
Retrieve the current scroll position including scrollTop and scrollLeft values for tracking scroll state.

### Method
`getPosition()`

### Endpoint
N/A (Instance Method)

### Parameters
None

### Request Example
```javascript
const vs = this.$refs.vs;
const position = vs.getPosition();
console.log('scrollTop:', position.scrollTop);
console.log('scrollLeft:', position.scrollLeft);
```

### Response
#### Success Response (200)
- **scrollTop** (number) - The current vertical scroll position.
- **scrollLeft** (number) - The current horizontal scroll position.

#### Response Example
```json
{
  "scrollTop": 150,
  "scrollLeft": 50
}
```
```

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

### Register Vuescroll globally for Vue 2.x

Source: https://github.com/yvescoding/vuescroll/blob/dev/README.md

Import and register the Vuescroll plugin globally in your Vue 2.x application. You can customize the component name and set global configurations.

```javascript
import vuescroll from 'vuescroll';
import Vue from 'vue';

Vue.use(vuescroll, {
  ops: {
    // The global config
  },
  name: 'myScroll' // customize component name, default -> vueScroll
});

// OR

Vue.component('vue-scroll', vuescroll);
```

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

### Retrieve and Restore Scroll Position

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Use getPosition to track scroll state. This is useful for saving and restoring scroll positions across component updates.

```javascript
const vs = this.$refs.vs;

// Get current scroll position
const position = vs.getPosition();
console.log('scrollTop:', position.scrollTop);
console.log('scrollLeft:', position.scrollLeft);

// Example: Save and restore scroll position
let savedPosition = null;

function saveScrollPosition() {
  savedPosition = this.$refs.vs.getPosition();
}

function restoreScrollPosition() {
  if (savedPosition) {
    this.$refs.vs.scrollTo({
      x: savedPosition.scrollLeft,
      y: savedPosition.scrollTop
    }, 0);
  }
}
```

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

### Monitor Scroll Engagement

Source: https://context7.com/yvescoding/vuescroll/llms.txt

Track the number of scroll events and reset the counter as needed for analytics or UI logic.

```javascript
const vs = this.$refs.vs;

// Get total scroll count
const times = vs.getScrollingTimes();
console.log('User has scrolled', times, 'times');

// Reset scroll counter
vs.clearScrollingTimes();

// Example: Analytics tracking
function trackScrollEngagement() {
  const scrollCount = this.$refs.vs.getScrollingTimes();
  if (scrollCount > 10) {
    analytics.track('high_scroll_engagement', { count: scrollCount });
  }
}
```

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