index.js

const inBrowser = typeof window !== 'undefined'
const supportTouch = inBrowser && 'ontouchstart' in window

function createBounceFixer() {
  if (!supportTouch) {
    return {
      enable() {},
      disable() {},
    }
  }

  let startY

  function handleTouchstart(event) {
    startY = event.touches[0].clientY
  }

  function handleTouchmove(event) {
    let el = event.target

    while (el !== document.body && el !== document.documentElement) {
      const { overflowY } = window.getComputedStyle(el)
      const isScroller = overflowY === 'auto' || overflowY === 'scroll'
      const allowScroll = isScroller && el.scrollHeight > el.clientHeight

      if (allowScroll) {
        const currentY = event.touches[0].clientY
        const isReachTop = startY <= currentY && el.scrollTop == 0
        const offsetBottom = Math.abs(el.scrollHeight - el.scrollTop - el.clientHeight)
        const isReachBottom = startY >= currentY && offsetBottom <= 1

        if (isReachTop || isReachBottom) {
          if (event.cancelable) {
            event.preventDefault()
          }
        }

        return
      }

      el = el.parentNode
    }
  }

  function enable() {
    window.addEventListener('touchstart', handleTouchstart, { passive: false })
    window.addEventListener('touchmove', handleTouchmove, { passive: false })
  }

  function disable() {
    window.removeEventListener('touchstart', handleTouchstart)
    window.removeEventListener('touchmove', handleTouchmove)
  }

  return {
    enable,
    disable,
  }
}

export { createBounceFixer }