scroll-spyoom

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

★ 13 Open GitHub ↗

A library for intelligent detection of current rolling position and activation of node position based on MutationObserver API

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![npm version](https://img.shields.io/npm/v/scroll-spyoom)](https://www.npmjs.com/package/scroll-spyoom) ![npm bundle size](https://img.shields.io/bundlephobia/min/scroll-spyoom)

![Scroll-Spyoom](https://raw.githubusercontent.com/zengzjie/picgo-image/main/static_files/scroll-spyoom.png)

A library for intelligent detection of current rolling position and activation of node position based on MutationObserver API

## Features

- High Performance
- Friendly To Use
- Typrscript Support
- Lightweight ( 2kb or less by ES Module treeshaking )

## Installation

```shell
$ npm install scroll-spyoom
```

## Usage

> You can copy the simple example to your local project and try it out to see the effect.

```tsx
import { useEffect, useState } from 'react';
import { createNav } from 'scroll-spyoom';
import './index.less';

function rgb() {
  let r = Math.floor(Math.random() * 256);
  let g = Math.floor(Math.random() * 256);
  let b = Math.floor(Math.random() * 256);
  let rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
  return rgb;
}

const itemList = Array.from({ length: 5 }, () => rgb());

const offsetTop = 0;
const navBarId = 'nav';
const navBarOffsetTop = -40;
const scrollEndOffsetTop = 80;

export default Test;
```

> index.less

```less
.test {
  font-family: sans-serif;
  text-align: center;
  header {
    position: sticky;
    top: 0;
    z-index: 10;
    transition: opacity 1s;
  }

.navBar {
    --top: 0px;

height: 60px;
    background-color: pink;
    position: sticky;
    top: -60px;

& > div {
      height: inherit;
      line-height: 60px;
    }
  }

.pinnedNav {
    transform: translateY(80px);
    transition: transform 0.3s;
    background-color: yellow;
  }

.scrollEndNav {
    position: static;

& > .pinnedNav {
      background-color: blue;
      position: absolute;
      width: 100%;
    }
  }
}

```

## Auto Resize Detection

You don't have to worry about "resize". You can change the size as much as you want, and Scroll-Spyoom will always worked.

## Browser Compatibility

Same with [Mutation Observer](https://caniuse.com/?search=Mutation%20Observer). You can optimize the compatibility by including [polyfill](https://github.com/w3c/IntersectionObserver#readme).

```shell
$ npm install mutationobserver-shim --save-dev
```

Use it in your JavaScript file.

```tsx
const observer = new window.MutationObserver(callback);
```

Now you can use `MutationObserver`, and `mutationobserver-shim` will provide support for it in browsers that do not support the native API. This is a simple way to provide cross-browser support for `MutationObserver` using the `mutationobserver-shim` package. You can easily use `MutationObserver` in your project without worrying about browser compatibility issues.

scroll-spyoom

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README