Scroll Markers Example

View the live example

This example demonstrates using scroll markers to change some text at different scroll positions. The scroll-markercomponents are placed within a scroll-view and control the hiding and showing of the paragraph elements containing the text. When a scroll-marker becomes visible, it sets the currently showing paragraph in data by the name assigned to the scroll-marker .

To resolve a bug that arises from browser windows smaller than the spacing of scroll-marker 's where no component is visible because no scroll-marker 's are visible, we utilize the $scrollview.getScrollDirection() method. When a marker leaves visibility, we check if it's the first one the on the page and if the user is scrolling up. If that's the case, set the currentlyShowing in the component data to be the first component on the page. This effectively prevents the condition where nothing is showing.

markerNotVisible(name) {
      const scrollDirection = $scrollview.getScrollDirection()
      if (name === 'first' && scrollDirection === 'UP') this.currentlyShowing = name
}

Note, the scroll-marker components are in debug mode so they render as horizontal red lines with their name. This can be toggled by checkbox at the bottom. see Scroll Markers for more information.