# indicators 2.2.0

# Introduciton

The indicators provides the ability to link with another BetterScroll. With this, you can achieve effects such as Parallax Scrolling, Magnifier.


This is a very powerful and creative plugin.

# Install

npm install @better-scroll/indicators --save

// or

yarn add @better-scroll/indicators

# Usage

First, install the plugin via the static method BScroll.use()

import BScroll from '@better-scroll/core'
import Indicators from '@better-scroll/indicators'


pass correct indicators options.

new BScroll('.wrapper', {
  indicators: {
    // For details, please refer to the demo below
    relationElement: someHTMLElement

# Demos

  • Magnifier

      <div class="minimap-container">
        <div class="scroll-wrapper" ref="wrapper">
          <!-- maxWidth is used to overwrite vuepress default theme style -->
          <!-- because this component is used in vuepress markdown as a demo -->
          <img :style="{ maxWidth: 'none' }" class="scroll-content" :src="dinnerLink" />
        <div class="scroll-indicator" ref="indicatorWrapper">
          <img class="scroll-indicator-bg" :src="dinnerLink">
          <div class="scroll-indicator-handle"></div>
  • Parallax Scrolling

# indicators options

# relationElement

  • Type: HTMLElement

The container element associated with another BetterScroll, just like the above demo, div.scroll-indicator is releationElement. releationElement must be passed in by the user and has child elements.

# relationElementHandleElementIndex

  • Type: number
  • Default: 0

Specify the child element of releationElement as the manipulated element. For details, please refer to the above demo.

# ratio

  • Type: number | Ratio | undefined
  • Default: undefined
type Ratio = {
  // Specify the ratio of the scroll distance of x
  x: number
  // Specify the ratio of the scroll distance of y
  y: number

Specify the ratio of releationElement to the scrolling distance of BetterScroll. Usually,the plugin will automatically calculate the scroll ratio of the two, but you can also manually specify the ratio to achieve the effect of Parallax Scrolling. For details, please refer to the demo above.

# interactive

  • Type: boolean | undefined
  • Default: undefined

Decide whether the relationElementHandleElementIndex of relationElement can interact. When it is set to false, it will not respond to touch / mouse events.