npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zhinan-oppo/scroll-handle

v3.30.1

Published

A library to handle scroll event of browser. Apply custom callback when scolling into elements like inView event.

Downloads

46

Readme

scroll-handle

监听页面滚动, 判断元素是否处于页面可视范围内

Install

使用 yarn 安装

yarn add @zhinan-oppo/scroll-handle

引用方式

import { scrollHandle } from '@zhinan-oppo/scroll-handle';

Instruction (Examples)

type Placement = 'top' | 'center' | 'bottom' // viewport 的位置
type PlacementPercent = number // viewport 高度的倍数, 取值 0~1
type Distance = number // 距离 viewport 顶部的像素值, 单位(px)
type ScrollProps = {
  dom: Element
  distance: number // 当前滚动位置和 start 位置的距离(px)
  total: number // inView 的 start 到 end 的总距离(px)
}

scrollHandle(
  // 对象 DOM 元素
  dom: string | Element,
  options: {
    forceInViewBoundary: boolean = 'false' // inView -> before/after 的时候是否触发 handlers.inView() 回调
    // scroll 的一个参数, 是否等待脚本处理完毕才触发下次默认事件, 了解更多: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
    passive: boolean = 'true'

    // 当 dom 的顶部进入到 viewport 的哪个位置(相对于 viewport 顶部)开始属于 inView 状态
    start: {
      percent: Placement | PlacementPercent
      distance: Distance // px
    } | Distance | Placement = 'bottom'

    // 当 dom 的底部离开 viewport 的哪个位置(相对于 viewport 顶部)开始、页面再向下时, 属于 after 状态
    end: {
      percent: Placement | PlacementPercent
      distance: Distance
    } | Distance | Placement = 'top'

    // 滚动时触发的 callback 函数
    handlers: {
      // 状态变化后触发
      onStateChange: ({
        dom,
        state,
        oldState
      }: {
        dom: Element
        state: 'before' | 'inView' | 'after'
        oldState: 'before' | 'inView' | 'after'
      }) => void
      inView: Function({ dom, distance, total }: ScrollProps)     // 在视图中会触发
      after: Function({ dom, distance, total }: ScrollProps)      // 在元素滚走后会触发
      before: Function({ dom, distance, total }: ScrollProps)     // 在尚未滚到该元素时触发
      always: Function({ dom, distance, total }: ScrollProps)     // 始终触发
    }
  }
): () => void

Examples

用法示例:
scrollHandle(document.querySelector('#element'), {
  start: 120,
  handles: {
    onStateChange({ state, oldState }) {
      console.log({ state, oldState })
    },
    inView({ distance, total }) {
      const progress = distance / total
      console.log({ progress })
    }
  }
})

scrollHandle('#element', {
  start: { percent: '0.4' },
  handles: {
    onStateChange({ state, oldState }) {
      console.log({ state, oldState })
    },
    always({ distance, total }) {
      const progress = distance / total
      console.log({ progress })
    }
  }
})