vuescroll

You can install vuescroll using either npm or yarn.

npm i vuescroll -S

# OR

yarn add vuescroll

When configuring vuescroll in slide mode, you cannot enable certain features simultaneously.

Constraint: You can only have one of the following enabled at a time:

1. paging
2. snapping (where snapping.enable is true)
3. pullRefresh or pushLoad (where enable is true)

If you attempt to enable more than one of these groups, the configValidator will trigger an error: paging, snapping, (pullRefresh with pushLoad) can only one of them to be true.

When initializing vuescroll, you can specify a mode within the vuescroll configuration object. The available modes are determined by the library's internal modes list. If an invalid mode is provided, the validator will trigger an error indicating that the mode option must be one of the supported modes.

const config = {
  vuescroll: {
    mode: 'native'
  }
};

The scrollButton configuration controls the behavior of scroll buttons:

• enable: Whether scroll buttons are enabled. Defaults to false.
• background: The background color of the button.
• opacity: The opacity of the button.
• step: The scroll step distance. Defaults to 180.
• mousedownStep: The scroll step distance during mousedown. Defaults to 30.

const config = {
  scrollButton: {
    enable: false,
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    step: 180,
    mousedownStep: 30
  }
};

The vueScroll component accepts an ops prop of type Object. This allows you to provide component-specific configuration that overrides or merges with the global configuration. The configuration is organized into several namespaces:

• vuescroll: Core settings (e.g., pullRefresh, pushLoad, scroller).
• scrollPanel: Settings for the scrollable panel (e.g., maxHeight, maxWidth, initialScrollY, initialScrollX).
• scrollContent: Settings for the content inside the scroll area.
• rail: Settings for the scroll rail.
• bar: Settings for the scrollbars (e.g., opacity, showDelay, keepShow).

The rail configuration defines the appearance and behavior of the scroll rail:

• background: The background color of the rail.
• opacity: The opacity of the rail.
• border: The border style.
• size: The height/width of the rail. Defaults to '6px'.
• specifyBorderRadius: If true, uses a specific border-radius; otherwise, it matches the rail's size. Defaults to false.
• gutterOfEnds: Distance from the ends of the X/Y axes.
• gutterOfSide: Distance from the side of the container. Defaults to '2px'.
• keepShow: Whether to keep the rail visible even if content height is insufficient. Defaults to false.

const config = {
  rail: {
    background: '#01a99a',
    opacity: 0,
    border: 'none',
    size: '6px',
    specifyBorderRadius: false,
    gutterOfEnds: null,
    gutterOfSide: '2px',
    keepShow: false
  }
};

The scrollPanel configuration controls the scrolling behavior and initial state of the panel:

• initialScrollY / initialScrollX: Determines the starting scroll position. Must be a percentage string (e.g., '10%') or a number $\ge 0$ (e.g., 100).
• scrollingX: Enables horizontal scrolling. Defaults to true.
• scrollingY: Enables vertical scrolling. Defaults to true.
• speed: The scroll speed in milliseconds. Defaults to 300.
• easing: The easing function for the scroll animation.
• verticalNativeBarPos: Sets the position of the native vertical scrollbar. Defaults to 'right'.
• maxHeight / maxWidth: Constraints for the scroll panel.

const config = {
  scrollPanel: {
    initialScrollY: '10%',
    initialScrollX: false,
    scrollingX: true,
    scrollingY: true,
    speed: 300,
    verticalNativeBarPos: 'right'
  }
};

The vuescroll configuration object allows you to control the core behavior of the library. Key options include:

• sizeStrategy: Determines how the size (height/width) is calculated. Options include 'percent' (e.g., '100%').
• detectResize: A boolean indicating whether to detect DOM resizing. Defaults to true.
• locking: A boolean that enables locking to the main axis if the user moves only slightly on one axis at the start. Defaults to true.

const config = {
  vuescroll: {
    sizeStrategy: 'percent',
    detectResize: true,
    locking: true
  }
};