Methods & Properties

These are the helper methods and properties available on the $scrollview object.

Usage

To use these methods or access these properties, you will have to import the $scrollview object into your component:

import { $scrollview } from 'vue-scrollview'

Methods

$scrollview.scrollToComponent( ComponentKey, [ Offset ] )

  • Arguments:

    • {String | Number} - A component key.

    • {Number} - An offset to use when scrolling to this component. Defaults to the offset of the scrollview the component resides in.

  • Usage:

Scroll to a component with the key of 'example' and offset the scroll position by 125px.

$scrollview.scrollToComponent('example', 125)

$scrollview.refresh()

  • Usage:

Manually refresh the locations being tracked for scrollview components. This is intended as an escape hatch in case you need to override the automatic cache invalidation for component locations. You will more than likely always call this method from within a this.$nextTick callback so Vue completes it's rendering to the DOM before ScrollView attempts to determine component locations.

const results = await ajax.get('https://example/com')
this.list = results // updating some list on the VM components in a scrollview are rendering from.
this.$nextTick(() => $scrollview.refresh())

$scrollview.getComponentLocation( ComponentKey )

  • Arguments:
    • {String | Number} - A component key.
  • Returns: The distance from the top of the components root element to the top of the page.
  • Usage:

Sometimes you need to know where a component falls on the page to implement some kind of custom behavior. Here's an example using the native smooth scrolling API to smoothly scroll to a component.

const componentLocation = $scrollview.getComponentLocation('example')
window.scrollTo({ top: componentLocation, behavior: 'smooth' })

$scrollview.getScrollDirection()

  • Returns: A string with the value 'UP' or 'DOWN' that denotes the current scroll direction.
  • Usage:

Adjust behavior based on the scroll direction. For example, you might want to respond a certain way when a component becomes visible scrolling down and a different way when a component becomes visible scrolling up.

const scrollDirection = $scrollview.getScrollDirection()
// set background to red if scrolling up, set to blue if scrolling down.
if (scrollDirection === 'UP') {
    this.setBackgroundColor('red') // example instance method that sets the background color of <body>
} else {
    this.setBackgroundColor('blue')
}

Properties

$scrollview.onLastEnter

  • type: { Function }
  • Default: () => {}
  • Usage:

Assign a function to this property to be called when the last component on the page enters visibility. This is useful for creating infinite scroll experiences.

// call instance method 'fetchMore' when the last component enters the viewport.
// For example, this could fetch some blog posts, add them to data, render some new post
// components into a scrollview and call refresh to update tracking.
$scrollview.onLastEnter = this.fetchMore

results matching ""

    No results matching ""