Informs an element about how much of it has been viewed

Usage no npm install needed!

<script type="module">
  import okibaViewProgress from 'https://cdn.skypack.dev/@okiba/view-progress';


Okiba / ViewProgress

Retrieves the percentage (0 to 1) of element's in-view portion according to page scroll Can be extended or instantiated

import { qs, qsa, on } from '@okiba/dom'
import Component from '@okiba/component'
import ViewProgress from '@okiba/view-progress'

class ViewProgressComponent extends ViewProgress {
  constructor(args) {
    this.on('enter', this.onEnter)
    this.on('progress', this.onProgress)
    this.on('exit', this.onExit)
    this.update({ y: window.scrollY })
    on(window, 'scroll', () => this.update({ y: window.scrollY }))

  onEnter = () => console.log()(`${this.el} entered`)
  onProgress = ({ progress }) => console.log(progress)
  onExit = () => console.log()(`${this.el} exited`)

const app = new Component({
  el: qs('#app'),
  components: [
      selector: '.view-progress-element',
      type: ViewProgress


npm i --save @okiba/view-progress

Or import it directly in the browser

<script type="module" src="https://unpkg.com/@okiba/view-progress/index.js"></script>


import ViewProgress from '@okiba/view-progress'

Untranspiled code 🛑

Okiba UI packages are not transpiled, so don't forget to transpile them with your favourite bundler. For example, using Babel with Webpack, you should prevent imports from okiba to be excluded from transpilation, like follows:

  test: /\.js$/,
  exclude: /node_modules\/(?!(@okiba)\/).*/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env']

constructor(args, args.el, args.options, args.options.overflow, args.options.thresholdTop, args.options.thresholdBottom)


+ args: Object

Arguments to create a component

+ args.el: Element

DOM Element to be bound

+ args.options: Object

Custom options passed to the component

+ args.options.overflow: Boolean

Keeps emitting progress even if elements is out of viewport

+ args.options.thresholdTop: Number

A value added to element's top position to adjust its bounding area

+ args.options.thresholdBottom: Number

A value added to element's bot position to adjust its bounding area

update(args, args.y)

Updates element's progress and emits enter, exit and progress events according to passed scroll position


+ args: Object
+ args.y: Number

The current scrollY


Updates element's boundaries according to current viewport sizes and page scrollable area


Adds resize event listener to EventManager


Removes resize event listener from EventManager


Removes all event listeners on destroy from EventManager