minimal picoapp smooth scroll implementation using native scrollbar

smooth.js

import { component } from 'picoapp'
import { add } from '@/util/dom'
import { round, lerp } from '@/util/math'

export default component((node, ctx) => {
  let sh = null
  let ty = 0
  let cy = 0
  let ly = null
  let ease = 0.115

  add(node, 'fix', 'top', 'fill-x', 'oh')
  ctx.on('resize', resize)
  ctx.on('tick', update)

  function resize() {
    sh = node.getBoundingClientRect().height
    document.body.style.height = sh + 'px'
  }

  function update() {
    ty = pageYOffset
    cy = round(lerp(cy, ty, ease), 100)

    let d = cy - ty
    if (d < 0) d *= -1
    if (d < 0.1) cy = ty

    if (ly !== cy) {
      node.style.transform = `translate3d(0, ${-cy}px, 0)`
      ctx.hydrate({ ty, cy, ly, sh })
      ly = cy
    }
  }
})