Vuescroll

https://nifty-shannon-7eab38.netlify.app/
Admin
Vuescroll is a customizable scrollbar plugin for Vue.js that supports pull-to-refresh, push-to-load,...
Tokens:9,704
Snippets:117
Trust Score:7.6
Update:6 months ago
Show doc for...
Tokens:
Raw
### Implement Load Slot

Source: https://nifty-shannon-7eab38.netlify.app/guide/slot.html

Use the load-start slot to display a custom hint during the load start stage.

```html
<div calss="parent">
     <vuescroll>
        <!-- Load-slot -->
        <div class="slot-load" slot="load-start"></div>
        <div class="child">
        </div>
     </vuescroll>
    </div>
```

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

### Implement Refresh Slot

Source: https://nifty-shannon-7eab38.netlify.app/guide/slot.html

Use the refresh-start slot to display a custom hint during the refresh start stage. Ensure the slot DOM has absolute positioning to avoid layout issues.

```html
<div calss="parent">
     <vuescroll>
        <!-- Refresh-slot -->
        <div class="slot-refresh" slot="refresh-start"></div>
        <div class="child">
        </div>
     </vuescroll>
    </div>
```

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

### Install Vuescroll using npm or yarn

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

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

```bash
npm i vuescroll -S
# or use yarn
# yarn add vuescroll
```

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

### Basic Vuescroll usage with configuration

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

A basic example of using the Vuescroll component with custom configurations bound to the 'ops' prop. Ensure the child element's size exceeds the parent's for scrollbars to appear.

```vue
<template>
  <div class="parent-element">
    <!-- bind your configurations -->
    <vue-scroll :ops="ops"> <div class="child-element"></div> </vue-scroll>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ops: {
          vuescroll: {},
          scrollPanel: {},
          rail: {},
          bar: {}
        }
      };
    }
  };
</script>
```

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

### Get scroll process

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Returns the current scroll progress as a value between 0 and 1.

```html
<vue-scroll ref="vs" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
```

```javascript
const { v, h } = this.$refs["vs"].getScrollProcess();

console.log(v, h);
```

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

### Configure VueScroll Slide Mode - Pull Refresh

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Enable and configure pull-to-refresh functionality, including custom tips for different states like active, start, and before deactivation.

```javascript
pullRefresh: {
  enable: false,
  tips: {
    deactive: 'Pull to Refresh',
    active: 'Release to Refresh',
    start: 'Refreshing...',
    beforeDeactive: 'Refresh Successfully!'
  }
}
```

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

### Get current page

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Retrieves the current page number when in slide mode with paging enabled.

```javascript
const pageInfo = this.$refs["vs"].getCurrentPage();
console.log(pageInfo);
```

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

### Get scroll position

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Retrieves the current scrollTop and scrollLeft values.

```html
<vue-scroll ref="vs" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
```

```javascript
const { scrollTop, scrollLeft } = this.$refs["vs"].getPosition();

console.log(scrollTop, scrollLeft);
```

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

### Get current view DOM

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Retrieves the direct subelement currently visible within the vuescroll container.

```javascript
this.$refs["vs"].getCurrentviewDom();
```

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

### Initialize Vuescroll in Vue

Source: https://nifty-shannon-7eab38.netlify.app/

Import the plugin and CSS, then register it globally using Vue.use().

```javascript
import Vue from "vue";
import vuescroll from "vuescroll/dist/vuescroll-native";
// import the css file 
import "vuescroll/dist/vuescroll.css";

Vue.use(vuescroll);
```

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

### Go to page

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Navigates to a specific page in slide mode.

```javascript
this.$refs["vs"].goToPage(
  {
    x: 1,
    y: 2
  },
  true
);
```

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

### Handle Resize Event

Source: https://nifty-shannon-7eab38.netlify.app/guide/event.html

Triggered when the content size changes. Use this to react to layout updates.

```html
<vue-scroll @handle-resize="handleResize"> </vue-scroll>
```

```javascript
    // ...
    {
        methods: {
            handleResize() {
                console.log('content has resized!')
            }
        }
    }
```

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

### Bar Configuration Overview

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Defines the appearance and behavior of the scrollbar itself, including show delay, background, opacity, and minimum size.

```javascript
bar: {
    showDelay: 500,
    onlyShowBarOnScroll: true,
    keepShow: false,
    background: '#c1c1c1',
    opacity: 1,
    hoverStyle: false，
    specifyBorderRadius: false,
    minSize: 0,
    size: '6px',
    disable: false
  }
```

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

### Scrollbar Configuration Options

Source: https://nifty-shannon-7eab38.netlify.app/demo

This section outlines the available properties for customizing the scrollbar's appearance and behavior.

```APIDOC
## Scrollbar Configuration

This document details the configuration options for the Nifty Shannon scrollbar.

### General Settings

- **scroll duration** (number): The duration of the scroll animation.
- **locking** (boolean): Enables or disables scroll locking. Default: `true`.
- **Wheel direction reverse** (boolean): Reverses the direction of the scroll wheel. Default: `false`.

### Bar Appearance

- **Bar KeepShow** (boolean): Determines if the scrollbar bar is always visible. Default: `false`.
- **Bar Background** (color): Sets the background color of the scrollbar bar. Example: `#00ff00`.
- **Bar Size** (number): Sets the width or height of the scrollbar bar.
- **Bar MinSize** (number): Sets the minimum size of the scrollbar bar. Default: `0.2`.

### Rail Appearance

- **Rail Background** (color): Sets the background color of the scrollbar rail. Example: `#01a99a`.
- **Rail Opacity** (number): Sets the opacity of the scrollbar rail. Default: `0.2`.
- **Rail Size** (number): Sets the width or height of the scrollbar rail.

### Scroll Buttons

- **scrollButton enable** (boolean): Enables or disables the scroll buttons. Default: `true`.
- **scrollButton background** (color): Sets the background color of the scroll buttons. Example: `#cecece`.

### Animation

- **Animation** (string): Specifies the easing function for animations. Available options include: `easeInQuad`, `easeOutQuad`, `easeInOutQuad`, `easeInCubic`, `easeOutCubic`, `easeInOutCubic`, `easeInQuart`, `easeOutQuart`, `easeInOutQuart`, `easeInQuint`, `easeOutQuint`, `easeInOutQuint`.

### Auto Load

- **autoLoadEnable** (boolean): Enables or disables auto-loading content. Accepts `True` or `False`.
- **autoLoadDistance** (number): The distance from the end of the scrollable area to trigger auto-load.

### Triggering Refresh or Load

- **Trigger Refresh Or Load** (string): Specifies the action to trigger refresh or load. Options: `Load`, `Refresh`.

### Slots

- **Trigger**: Custom animations for refresh/load can be implemented via slots.
```

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

### goToPage(page, animate)

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Navigates to a specific page in slide mode.

```APIDOC
## goToPage(page[, animate])

### Description
Navigates to a specific page index. Only works under slide mode.

### Parameters
#### Arguments
- **page** (Object) - Required - The page coordinates {x, y}.
- **animate** (boolean) - Optional - Whether to animate the transition.

### Request Example
```
this.$refs["vs"].goToPage({ x: 1, y: 2 }, true);
```
```

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

### Configure ScrollButton Settings

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Set scroll button properties like enable, background, opacity, step, and mousedownStep. Defaults are provided for each property.

```javascript
scrollButton: {
    enable: false,
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    step: 180,
    mousedownStep: 30
  }
```

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

### Direct import via CDN

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

Include Vuescroll and its modes directly from a CDN in your HTML file. Ensure Vue is loaded before Vuescroll.

```html
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuescroll"></script>
<!-- import vuescroll-slide -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-slide.js"></script>
<!-- import vuescroll-native -->
<script src="https://unpkg.com/vuescroll/dist/vuescroll-native.js"></script>
```

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

### Importing Vuescroll Modes

Source: https://nifty-shannon-7eab38.netlify.app/guide/optimizing-performance.html

Import specific build files to include only the necessary features for your application.

```javascript
import vuescroll from 'vuescroll/dist/vuescroll-native';
// .... css file
```

```javascript
import vuescroll from 'vuescroll/dist/vuescroll-slide';
// .... css file
```

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

### Configure VueScroll Slide Mode - Push Load

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Enable and configure push-to-load functionality, including automatic loading and custom tips for various states.

```javascript
pushLoad: {
  enable: false,
  tips: {
    deactive: 'Push to Load',
    active: 'Release to Load',
    start: 'Loading...',
    beforeDeactive: 'Load Successfully!'
  },
  auto: false,
  autoLoadDistance: 0
}
```

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

### Configure VueScroll Slide Mode - Overview

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Comprehensive configuration for VueScroll in slide mode, including pull refresh, push load, paging, zooming, snapping, and scroller settings.

```javascript
vuescroll: {
    pullRefresh: {
      enable: false,
      tips: {
        deactive: 'Pull to Refresh',
        active: 'Release to Refresh',
        start: 'Refreshing...',
        beforeDeactive: 'Refresh Successfully!'
      }
    },
    pushLoad: {
      enable: false,
      tips: {
        deactive: 'Push to Load',
        active: 'Release to Load',
        start: 'Loading...',
        beforeDeactive: 'Load Successfully!'
      },
      auto: false,
      autoLoadDistance: 0
    },
    paging: false,
    zooming: true,
    snapping: {
      enable: false,
      width: 100,
      height: 100
    },
     scroller: {
      /*
        Allow to scroll out of boundaries
        true or false or an array specify which direction can be
        bounced. The options can be:
        ['top','bottom','left','right']
      */
      bouncing: {
        top: 100,
        bottom: 100,
        left: 100,
        right: 100
      },
      /** Enable locking to the main axis if user moves only slightly on one of them at start */
      locking: true,
      /** Minimum zoom level */
      minZoom: 0.5,
      /** Maximum zoom level */
      maxZoom: 3,
      /** Multiply or decrease scrolling speed **/ 
      speedMultiplier: 1,
      /** This configures the amount of change applied to deceleration when reaching boundaries  **/ 
      penetrationDeceleration: 0.03,
      /** This configures the amount of change applied to acceleration when reaching boundaries  **/ 
      penetrationAcceleration: 0.08,
      /** Whether call e.preventDefault event when sliding the content or not */
      preventDefault: true,
      /** Whether call preventDefault when (mouse/touch)move*/
      preventDefaultOnMove: true,
      // whether to  disable scroller or not.
      disable: false
    }
  }
```

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

### ScrollPanel Configuration Overview

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Configures the scroll panel wrapper, controlling initial scroll positions, scrolling directions, speed, easing, and native bar positioning.

```javascript
scrollPanel: {
    initialScrollY: false,
    initialScrollX: false,
    scrollingX: true,
    scrollingY: true,
    speed: 300,
    easing: undefined,
    verticalNativeBarPos: 'right'
  }
```

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

### Rail Configuration Overview

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Sets the appearance and behavior of the scrollbar rail, including background color, opacity, size, border radius, and gutters.

```javascript
rail: {
    background: '#01a99a',
    opacity: 0,
    size: '6px',
    specifyBorderRadius: false,
    gutterOfEnds: null,
     gutterOfSide: '2px',
    keepShow: false
  }
```

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

### Configure Native VueScroll Behavior

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Customize native scrolling behavior with options for wheel scroll duration, direction reversal, and shift key checking.

```javascript
vuescroll: {
    wheelScrollDuration: 0,
    wheelDirectionReverse: false,
    checkShifKey: true
  }
```

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

### ScrollButton Configuration

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Configuration for the scroll button component.

```APIDOC
## ScrollButton Configuration

### Parameters
- **enable** (boolean) - Optional - Whether to enable scrollButton.
- **background** (string) - Optional - scrollButton's background.
- **opacity** (number) - Optional - scrollButton's opacity.
- **step** (number) - Optional - The distance to scroll each time you click the scrollButton.
- **mousedownStep** (number) - Optional - The distance to scroll when you hold pressing the scrollButton.
```

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

### Vuescroll Native Mode

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Configuration for native scrolling mode.

```APIDOC
## Vuescroll Native Mode

### Parameters
- **wheelScrollDuration** (number) - Optional - The time it takes for the mouse wheel to scroll for a certain distance.
- **wheelDirectionReverse** (boolean) - Optional - Whether to make wheel scrolling's direction reverse.
- **checkShifKey** (boolean) - Optional - Whether check shif key or not.
```

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

### Bar Configuration

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Configuration options for the scroll bar appearance and behavior.

```APIDOC
## Bar Configuration

### Parameters
- **specifyBorderRadius** (false|string) - Optional - Specify bar's border radius.
- **minSize** (number) - Optional - Set a min size for bar, from 0 to 1.
- **disable** (boolean) - Optional - Whether to disable bar.
- **size** (string) - Optional - Bar's width or size.
```

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

### Common Events

Source: https://nifty-shannon-7eab38.netlify.app/guide/event.html

These events are triggered under specific circumstances related to content size changes and scrolling.

```APIDOC
## Event: handle-resize

### Description
Triggered when the content's size changes.

### Parameters
- `vertical` (any) - Information about the vertical scrollbar.
- `horizontal` (any) - Information about the horizontal scrollbar.
- `nativeEvent` (Event) - The native browser event.

### Usage
```html
<vue-scroll @handle-resize="handleResize"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleResize() {
        console.log('content has resized!')
    }
}
// ...
```
```

```APIDOC
## Event: handle-scroll

### Description
Triggered when the content is scrolling.

### Parameters
- `vertical` (any) - Information about the vertical scrollbar.
- `horizontal` (any) - Information about the horizontal scrollbar.
- `nativeEvent` (Event) - The native browser event.

### Usage
```html
<vue-scroll @handle-scroll="handleScroll"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleScroll(vertical, horizontal, nativeEvent) {
        console.log(vertical, horizontal, nativeEvent)
    }
}
// ...
```
```

```APIDOC
## Event: handle-scroll-complete

### Description
Triggered when scrolling is complete.

### Parameters
- `vertical` (any) - Information about the vertical scrollbar.
- `horizontal` (any) - Information about the horizontal scrollbar.

### Usage
```html
<vue-scroll @handle-scroll-complete="handleComplete"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleComplete() {
        console.log('scroll complete！')
    }
}
// ...
```
```

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

### Vuescroll Configuration Overview

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Defines the main configuration object for Vuescroll, including mode, size strategy, resize detection, and locking behavior.

```javascript
vuescroll: {
    mode: 'native',
    sizeStrategy: 'percent',
    detectResize: true,
    /** Enable locking to the main axis if user moves only slightly on one of them at start */
    locking: true,
  }
```

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

### Implement Vuescroll Component

Source: https://nifty-shannon-7eab38.netlify.app/

Wrap content within the vue-scroll component and pass configuration options via the ops prop.

```html
<template>
  <div class="demo-container">
    <vue-scroll :ops="ops">
      <div class="demo-content">
        <span class="demo-content-text">Hello World</span>
      </div> 
    </vue-scroll>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ops: {} // Your options
    };
  }
};
</script>
```

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

### Handle Refresh Events

Source: https://nifty-shannon-7eab38.netlify.app/guide/event.html

Lifecycle events for pull-refresh functionality. Use the 'done' callback to transition between stages.

```html
<vue-scroll
  @refresh-activate="handleActivate"
  @refresh-start="handleStart"
  @refresh-before-deactivate="handleBeforeDeactivate"
  @refresh-deactivate="handleDeactivate"
>
</vue-scroll>
```

```javascript
    // ...
    {
        methods: {
            handleActivate(vm, refreshDom) {
                console.log(vm, refreshDom, 'handleActivate');
            },
            handleStart(vm, refreshDom, done) {
                console.log(vm, refreshDom, 'handleStart');
                seTimeout(() => {
                    done(); // load finished
                }, 2000)
            },
            handleBeforeDeactivate(vm, refreshDom, done) {
                console.log(vm, refreshDom, 'handleBeforeDeactivate');
                done();
            },
            handleDeactivate(vm, refreshDom) {
                console.log(vm, refreshDom, 'handleDeactivate');
            }
        }
    }
```

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

### refresh() / refreshAll()

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Refreshes the state of the vuescroll instance.

```APIDOC
## refresh() / refreshAll()

### Description
Refresh the state of the specified vuescroll or all vuescrolls. Useful when the scroll bar does not appear after data mutation.

### Request Example
```
this.$refs["vs"].refresh();
vuescroll.refreshAll();
```
```

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

### Trigger refresh or load

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Manually triggers the refresh or load action.

```javascript
this.$refs["vs"].triggerRefreshOrLoad("load");
```

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

### Globally import Vuescroll for Vue 3.x

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

Import Vuescroll globally in your Vue 3.x entry file using createApp. Global configurations can also be applied here.

```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
});
```

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

### Import Vuescroll in a Vue.js TypeScript Component

Source: https://nifty-shannon-7eab38.netlify.app/guide/typescript.html

Demonstrates how to import Vuescroll and use its reference within a Vue.js single file component written in TypeScript. The 'as' keyword is used for type assertion.

```html
<template>
  <div class="home">
    <vue-scroll ref="vs">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    </vue-scroll>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import vuescroll from 'vuescroll';
export default Vue.extend({
  name: 'home',
  data() {},
  created() {
    // The as symbol is used to tell the compiler that this is vuescroll
    const vs = this.$refs['vs'] as vuescroll;
  }
});
</script>

```

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

### Inference of Vuescroll Config with TypeScript

Source: https://nifty-shannon-7eab38.netlify.app/guide/typescript.html

Shows how to define and apply Vuescroll options using the `Config` type imported from 'vuescroll' for compile-time checking. This ensures that your configuration object adheres to the expected structure.

```html
<template>
  <div class="home">
    <vue-scroll :ops="ops">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    </vue-scroll>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { Config } from 'vuescroll';

const ops: Config = {
  // Your own options
};

export default Vue.extend({
  name: 'home',
  data() {
    return {
      ops: ops
    };
  }
});
</script>

```

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

### scrollBy(position, speed, easing)

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Scrolls the container by a relative distance from the current position.

```APIDOC
## scrollBy(position[, speed][, easing])

### Description
Takes the current position as the starting point and scrolls for a relative distance (dx or dy).

### Parameters
#### Arguments
- **position** (Object) - Required - The relative distance containing dx and/or dy (string | number).
- **speed** (number) - Optional - The duration of the scroll animation.
- **easing** (string) - Optional - The easing function to use.

### Request Example
```
this.$refs["vs"].scrollBy({ dx: "50%" }, 500);
this.$refs["vs"].scrollBy({ dy: -200 }, 500, "easeInQuad");
```
```

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

### Import only native mode features

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

Import only the native mode features of Vuescroll for a lighter implementation. Use 'vuescroll/dist/vuescroll-native' for this import.

```javascript
import Vue from "vue";
import vuescroll from "vuescroll/dist/vuescroll-native";

Vue.use(vuescroll);
```

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

### Slide Mode Events (Pull-Refresh)

Source: https://nifty-shannon-7eab38.netlify.app/guide/event.html

Events related to the pull-refresh and load functionalities in slide mode.

```APIDOC
## Event: refresh-activate

### Description
Triggered when pull-refresh is activated.

### Parameters
- `vm` (VueInstance) - The current Vuescroll instance.
- `refreshDom` (HTMLElement) - A DOM element shown as a tip.

### Usage
```html
<vue-scroll @refresh-activate="handleActivate"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleActivate(vm, refreshDom) {
        console.log(vm, refreshDom, 'handleActivate');
    }
}
// ...
```
```

```APIDOC
## Event: refresh-start

### Description
Triggered when pull-refresh starts.

### Parameters
- `vm` (VueInstance) - The current Vuescroll instance.
- `refreshDom` (HTMLElement) - A DOM element shown as a tip.
- `done` (Function) - A function to call to proceed to the next stage (e.g., after fetching data).

### Usage
```html
<vue-scroll @refresh-start="handleStart"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleStart(vm, refreshDom, done) {
        console.log(vm, refreshDom, 'handleStart');
        setTimeout(() => {
            done(); // load finished
        }, 2000)
    }
}
// ...
```
```

```APIDOC
## Event: refresh-before-deactivate

### Description
Triggered before pull-refresh deactivates.

### Parameters
- `vm` (VueInstance) - The current Vuescroll instance.
- `refreshDom` (HTMLElement) - A DOM element shown as a tip.
- `done` (Function) - A function to call to proceed to the next stage (e.g., showing a success/error message).

### Usage
```html
<vue-scroll @refresh-before-deactivate="handleBeforeDeactivate"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleBeforeDeactivate(vm, refreshDom, done) {
        console.log(vm, refreshDom, 'handleBeforeDeactivate');
        done();
    }
}
// ...
```
```

```APIDOC
## Event: refresh-deactivate

### Description
Triggered when pull-refresh deactivates.

### Parameters
- `vm` (VueInstance) - The current Vuescroll instance.
- `refreshDom` (HTMLElement) - A DOM element shown as a tip.

### Usage
```html
<vue-scroll @refresh-deactivate="handleDeactivate"> </vue-scroll>
```

```javascript
// ...
methods: {
    handleDeactivate(vm, refreshDom) {
        console.log(vm, refreshDom, 'handleDeactivate');
    }
}
// ...
```
```

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

### scrollTo(position, speed, easing)

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Scrolls the container to a specific coordinate position.

```APIDOC
## scrollTo(position[, speed][, easing])

### Description
Scrolls to a certain location. You can specify only x or y coordinates.

### Parameters
#### Arguments
- **position** (Object) - Required - The target position containing x and/or y (string | number).
- **speed** (number) - Optional - The duration of the scroll animation.
- **easing** (string) - Optional - The easing function to use.

### Request Example
```
this.$refs["vs"].scrollTo({ x: "50%" }, 500);
this.$refs["vs"].scrollTo({ y: 200 }, 500, "easeInQuad");
```
```

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

### getPosition()

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Retrieves the current scroll position.

```APIDOC
## getPosition()

### Description
Get the scrollTop and scrollLeft of current scrolling.

### Response
- **scrollTop** (number) - Current vertical scroll position.
- **scrollLeft** (number) - Current horizontal scroll position.

### Response Example
```
const { scrollTop, scrollLeft } = this.$refs["vs"].getPosition();
```
```

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

### Vuescroll Slide Mode

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Configuration for slide scrolling mode including pull-to-refresh and push-to-load.

```APIDOC
## Vuescroll Slide Mode

### Parameters
- **pullRefresh** (Object) - Optional - Configuration for pull-to-refresh functionality.
- **pushLoad** (Object) - Optional - Configuration for push-to-load functionality.
- **pushLoad.auto** (boolean) - Optional - Whether the load is triggered automatically.
- **pushLoad.autoLoadDistance** (number) - Optional - The distance from the bottom to trigger the automatic loading.
```

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

### scrollIntoView(selector, speed)

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Scrolls the container to a specific direct child element.

```APIDOC
## scrollIntoView(selector[, speed])

### Description
The current window scrolls to a direct child element of vuescroll.

### Parameters
#### Arguments
- **selector** (string) - Required - The CSS selector of the child element.
- **speed** (number) - Optional - The duration of the scroll animation.

### Request Example
```
this.$refs["vs"].scrollIntoView("#d3", 500);
```
```

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

### Handle Scroll Complete Event

Source: https://nifty-shannon-7eab38.netlify.app/guide/event.html

Triggered when scrolling finishes. Provides vertical and horizontal bar information.

```html
<vue-scroll @handle-scroll-complete="handleComplete"> </vue-scroll>
```

```javascript
    // ...
    {
        methods: {
            handleComplete() {
                console.log('scroll complete！')
            }
        }
    }
```

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

### Customize Container, Panel, and Content

Source: https://nifty-shannon-7eab38.netlify.app/guide/slot.html

Override default Vuescroll internal structures by providing custom components to the scroll-container, scroll-panel, and scroll-content slots.

```vue
<template>
  <div calss="parent">
    <vuescroll>
      <!-- Customize container -->
      <test-slot slot="scroll-container" name="container"> </test-slot>

      <!-- Customize  panel-->
      <test-slot slot="scroll-panel" name="container"> </test-slot>

      <!-- Customize  content-->
      <test-slot slot="scroll-content" name="container"> </test-slot>

      <div class="child"></div>
    </vuescroll>
  </div>
</template>
<script>
Vue.component('test-slot', {
  template: '<div :data-id="name"><slot></slot></div>',
  props: ['name']
});
</script>
```

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

### Handle Scroll Event

Source: https://nifty-shannon-7eab38.netlify.app/guide/event.html

Triggered during content scrolling. Provides vertical and horizontal bar information along with the native event.

```html
<vue-scroll @handle-scroll="handleScroll"> </vue-scroll>
```

```javascript
    // ...
    {
        methods: {
            handleScroll(vertical, horizontal, nativeEvent) {
                console.log(vertical, horizontal, nativeEvent)
            }
        }
    }
```

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

### Scroll into view

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Scrolls the container to a direct child element identified by a selector.

```html
<vue-scroll ref="vs">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</vue-scroll>
```

```javascript
this.$refs["vs"].scrollIntoView("#d3", 500);
```

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

### Configure VueScroll Slide Mode - Scroller

Source: https://nifty-shannon-7eab38.netlify.app/guide/configuration.html

Advanced scroller configurations for slide mode, including bouncing, locking, zoom levels, speed multipliers, and event prevention.

```javascript
scroller: {
  /*
    Allow to scroll out of boundaries
    true or false or an array specify which direction can be
    bounced. The options can be:
    ['top','bottom','left','right']
  */
  bouncing: {
    top: 100,
    bottom: 100,
    left: 100,
    right: 100
  },
  /** Enable locking to the main axis if user moves only slightly on one of them at start */
  locking: true,
  /** Minimum zoom level */
  minZoom: 0.5,
  /** Maximum zoom level */
  maxZoom: 3,
  /** Multiply or decrease scrolling speed **/ 
  speedMultiplier: 1,
  /** This configures the amount of change applied to deceleration when reaching boundaries  **/ 
  penetrationDeceleration: 0.03,
  /** This configures the amount of change applied to acceleration when reaching boundaries  **/ 
  penetrationAcceleration: 0.08,
  /** Whether call e.preventDefault event when sliding the content or not */
  preventDefault: true,
  /** Whether call preventDefault when (mouse/touch)move*/
  preventDefaultOnMove: true,
  // whether to  disable scroller or not.
  disable: false
}
```

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

### Control native scrolling

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Methods to stop, pause, or continue scrolling operations.

```javascript
this.$refs["vs"].stop();
this.$refs["vs"].pause();
this.$refs["vs"].continue();
```

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

### Globally import Vuescroll for Vue 2.x

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

Import Vuescroll globally in your Vue 2.x entry file. You can set global configurations or customize the component name.

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

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

/**
 * or
 */
Vue.prototype.$vuescrollConfig = {
  bar: {
    background: "#000"
  }
};
```

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

### Import only slide mode features

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

Import only the slide mode features of Vuescroll to reduce bundle size. This requires importing from 'vuescroll/dist/vuescroll-slide'.

```javascript
import Vue from "vue";
import vuescroll from "vuescroll/dist/vuescroll-slide";

Vue.use(vuescroll);
```

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

### Locally import Vuescroll component

Source: https://nifty-shannon-7eab38.netlify.app/guide/getting-started.html

Import the Vuescroll component locally within a specific Vue component for use in its template.

```vue
<template>
  <vuescroll> <!-- Your content... --> </vuescroll>
</template>
<script>
  import vuescroll from "vuescroll";

  export default {
    components: {
      vuescroll
    }
  };
</script>
```

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

### Scroll to specific position

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Use scrollTo to move the scroll container to a specific x or y coordinate with optional speed and easing.

```javascript
this.$refs["vs"].scrollTo(
  {
    x: "50%"
  },
  500
);

this.$refs["vs"].scrollTo(
  {
    y: 200
  },
  500,
  "easeInQuad"
);
```

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

### Scroll by relative distance

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Use scrollBy to scroll a relative distance from the current position.

```javascript
this.$refs["vs"].scrollBy(
  {
    dx: "50%"
  },
  500
);

this.$refs["vs"].scrollBy(
  {
    dy: -200
  },
  500,
  "easeInQuad"
);
```

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

### Refresh UI in IOS Slide Mode

Source: https://nifty-shannon-7eab38.netlify.app/guide/faq.html

Use setTimeout to trigger the refresh method after data has been fetched and the view has updated.

```javascript
{
   handleLoadBeforeDeactivate(vm, loadDom, done) {
      fetchData("remoteurl").then(response => {
        this.data = response.data;
        // Note:
        // Because we have to let vue render the new data first
        // So call refersh in setTimeout
        setTimeout(() => {
          this.$refs.vs.refresh();
        }, 100)
      });
    },
}
```

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

### Class Hook Events

Source: https://nifty-shannon-7eab38.netlify.app/guide/class-hook.html

This section lists and describes the various class hooks provided by vuescroll. These hooks are triggered by specific scrollbar events and add corresponding class names.

```APIDOC
## Class Hook Events

Class hooks in vuescroll add specific class names to elements when certain events occur. This allows for dynamic styling based on the state of the scrollbars.

### hasVBar

**Description:** Triggered when a vertical scrollbar exists.

### hasHBar

**Description:** Triggered when a horizontal scrollbar exists.

### vBarVisible

**Description:** Triggered when the vertical scrollbar is visible.

### hBarVisible

**Description:** Triggered when the horizontal scrollbar is visible.

### vBarDragging

**Description:** Triggered when the vertical scrollbar is being dragged.

### hBarDragging

**Description:** Triggered when the horizontal scrollbar is being dragged.

### clikingVerticalStartButton

**Description:** Triggered when the scroll button at the start of the vertical scrollbar is clicked.

### clikingVerticalEndButton

**Description:** Triggered when the scroll button at the end of the vertical scrollbar is clicked.

### clikingHorizontalStartButton

**Description:** Triggered when the scroll button at the start of the horizontal scrollbar is clicked.

### clikingHorizontalEndButton

**Description:** Triggered when the scroll button at the end of the horizontal scrollbar is clicked.

### mouseEnter

**Description:** Triggered when the mouse pointer enters the vuescroll area.
```

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

### Disabling detectResize

Source: https://nifty-shannon-7eab38.netlify.app/guide/optimizing-performance.html

Set detectResize to false to prevent the injection of an object element into the DOM, which improves performance but disables automatic content resize detection.

```javascript
data() {
    return {
        ops: {
          vuescroll: {
            detectResize: false
          }
        }
    }
}
```

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

### Refresh scroll state

Source: https://nifty-shannon-7eab38.netlify.app/guide/api.html

Updates the scroll bar state. It is recommended to call this in a setTimeout after data mutations.

```html
<vue-scroll ref="vs" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
<vue-scroll ref="vs1" :ops="ops">
  <div v-for="i in 3" :key="i" :id="'d' + i"></div>
</vue-scroll>
```

```javascript
// If you are a modular system, you can use vuescroll directly in the browser.

import vuescroll from "vuescroll";

this.$refs["vs"].refresh();

vuescroll.refreshAll();
```
Tokens:
Raw