# scroll-percent-changhao

> ```shell npm i scroll-percent-changhao ``` ## How To use! main.js ```js import Vue from 'vue' import App from './App.vue' import scrollPercent from "scroll-percent-changhao" Vue.config.productionTip = false Vue.use(scrollPercent) new Vue({ render: h => h(

Latest version **1.0.2** (published 2023-05-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install scroll-percent-changhao
pnpm add scroll-percent-changhao
yarn add scroll-percent-changhao
bun add scroll-percent-changhao
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-05-10 |
| First published | 2023-05-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 28.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | changhao970630 |
| Maintainers | changhao970630 |
| Keywords | 固定滚动, scroll-sticky, scroll-loaded |

## Links

- npm: https://www.npmjs.com/package/scroll-percent-changhao
- Repository: https://github.com/C-RiceCongee/scroll-sticky
- Homepage: https://github.com/C-RiceCongee/scroll-sticky#readme
- Issues: https://github.com/C-RiceCongee/scroll-sticky/issues
- npm.io page: https://npm.io/package/scroll-percent-changhao

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Recent versions

- 1.0.2 (latest) — 2023-05-10
- 1.0.1 — 2023-05-07
- 0.1.12 — 2023-05-07
- 0.1.11 — 2023-05-07
- 0.1.10 — 2023-05-06
- 0.1.9 — 2023-05-03
- 0.1.8 — 2023-05-03
- 0.1.7 — 2023-05-03
- 0.1.6 — 2023-05-03
- 0.1.5 — 2023-05-03
- 0.1.4 — 2023-05-03
- 0.1.3 — 2023-05-03
- 0.1.2 — 2023-05-03
- 0.1.1 — 2023-05-01
- 0.1.0 — 2023-05-01

## README

# scroll-percent
## INSTALL
```shell
npm i scroll-percent-changhao
```
## How To use!
main.js
```js
import Vue from 'vue'
import App from './App.vue'
import scrollPercent from "scroll-percent-changhao"
Vue.config.productionTip = false
Vue.use(scrollPercent)
new Vue({
render: h => h(App),
}).$mount('#app')
```

+ watchPercent Get scroll percent

```vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">

    <scroll-percent ref="st" @watchPercent="watchPercent">
      <template slot="viewElse" slot-scope="{percent}">
        <div style="position: absolute;left: 50%;top: 50%;font-size: 150px;z-index: 999;" class="1" v-show="percent>0.1&&percent<0.3">
          <h2>111</h2>
        </div>
        <div class="2" style="position: absolute;left: 50%;top: 50%;font-size: 150px;;z-index: 999;" v-show="percent>0.3&&percent<0.6">
          <h2>222</h2>
        </div>
        <div class="3" style="position: absolute;left: 50%;top: 50%;font-size: 150px;;z-index: 999;" v-show="percent>0.6">
          <h2>333</h2>
        </div>
      </template>
    </scroll-percent>

    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png"><img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png"><img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png"><img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">
    <img alt="Vue logo" src="./assets/logo.png">

  </div>
</template>

<script>

  export default {
    name: 'App',
    data () {
      return {
        images: [],
        canvasContext1: null,
      }
    },
    mounted () {
      this.loadStatic()
    },
    methods: {
      loadStatic () {
        /* eslint-disable */
        const loader = new PxLoader()
       for (let i = 0; i <= 150; i++) {
          this.images[
            i
          ] = loader.addImage(`http://cbistorge.ubtrobot.com/static/uploads/20230424/C_WG_2V1_00${(
            "00" + i
          ).slice(-3)}.png`);
        }
        this.canvasContext1 = this.$refs.st.getContext()
        loader.addCompletionListener(() => this.drawFrame(this.canvasContext1,0,this.images))
        loader.start()
      },
      drawFrame (ctx,current = 0,list = []) {
        if (!ctx) return
        const imgWidth = list[current].width
        const imgHeight = list[current].height
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        const scale = Math.max(windowWidth / imgWidth, windowHeight / imgHeight);
        const width = imgWidth * scale;
        const height = imgHeight * scale;
        const x = (windowWidth - width) / 2;
        const y = (windowHeight - height) / 2;
        ctx.drawImage(list[current], x, y, width, height)
      },
      watchPercent (p=0) {
        const idx = Math.floor(this.images.length * p)
        this.drawFrame(this.canvasContext1,idx,this.images)
      }
    },
  }
</script>

<style>
</style>
```

## demo

>Here is the use of this fixed rolling component to obtain a 100% complete fixed rolling frame animation effect!

[demo gif](http://qiniuyun.quancundexiwang.wang/%E5%BD%95%E5%B1%8F_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20230503144245.gif)

---
_Source: https://npm.io/package/scroll-percent-changhao · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._