# Api

# Common apis

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

# Arguments

• position (Object)

  • x (string | number)
  • y (string | number)

• speed (number)

• easing (string)

# Introduction

To scroll to a certain location, you can specify only x ory. easingparameter can be referred to easing

# Example

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

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

# Have a try

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

# Arguments

• position (Object)

  • dx (string | number)
  • dy (string | number)

• speed (number)

• easing (string)

# Introduction

Take the current position as the starting point, scroll for a distance, dx or dy. easingparameter can be referred to easing

# Example

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

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

# Have a try

# getCurrentviewDom()

# Introduction

Get the direct subelement of vuescroll as you can see.

# Example

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

# Have a try

# scrollIntoView(selector[ , speed])

# Arguments

• selector (string)

• speed (number)

# Introduction

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

# Example

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

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

# Have a try

# refresh()/refreshAll()

# Introduction

Refresh the state of the specified vuescroll or all vuescrolls.

# Usage

<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>

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

import vuescroll from "vuescroll";

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

vuescroll.refreshAll();

# getScrollProcess

# Introduction

Get the current scroll process under a range of [0, 1].

# Usage

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

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

console.log(v, h);

# getPosition

# Introduction

Get the scrollTop.scrollLeft of current scrolling.

# Usage

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

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

console.log(scrollTop, scrollLeft);

# Api for native mode

# stop()/pause()/continue()

# Introduction

Stop / pause / continue scrolling at once.

# Example

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

# Have a try

# Api for slide mode

# goToPage(page[, animate])

# Arguments

• page (Object)

  • x (number)
  • y (number)

• animate (boolean)

# Example

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

# getCurrentPage（）

# Introduction

Get the current page number. Work only under slide modeand paging boot.

# Example

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

# triggerRefreshOrLoad(type)

# Arguments

• type ('refresh' | 'load')

# Introduction

Directly trigger refresh or load.

# Example

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