# @tianfanfan/scroll-keeper

> [![Build Status](https://travis-ci.com/tianfanfan/scroll-keeper.svg?branch=master)](https://travis-ci.com/tianfanfan/scroll-keeper) [![NPM Download](https://img.shields.io/npm/dm/@tianfanfan/scroll-keeper.svg)](https://www.npmjs.com/package/@tianfanfan/sc

Latest version **1.1.1** (published 2019-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tianfanfan/scroll-keeper
pnpm add @tianfanfan/scroll-keeper
yarn add @tianfanfan/scroll-keeper
bun add @tianfanfan/scroll-keeper
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2019-05-14 |
| First published | 2019-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 0 |
| Unpacked size | 353.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | https://github.com/tianfanfan |
| Maintainers | tianfanfan |
| Keywords | vue, sfc, component |

## Links

- npm: https://www.npmjs.com/package/@tianfanfan/scroll-keeper
- Repository: https://github.com/tianfanfan/scroll-keeper
- Homepage: https://github.com/tianfanfan/scroll-keeper#readme
- Issues: https://github.com/tianfanfan/scroll-keeper/issues
- npm.io page: https://npm.io/package/@tianfanfan/scroll-keeper

## Recent versions

- 1.1.1 (latest) — 2019-05-14

## README

# scroll-keeper

[![Build Status](https://travis-ci.com/tianfanfan/scroll-keeper.svg?branch=master)](https://travis-ci.com/tianfanfan/scroll-keeper)
[![NPM Download](https://img.shields.io/npm/dm/@tianfanfan/scroll-keeper.svg)](https://www.npmjs.com/package/@tianfanfan/scroll-keeper)
[![NPM Version](https://img.shields.io/npm/v/@tianfanfan/scroll-keeper.svg)](https://www.npmjs.com/package/@tianfanfan/scroll-keeper)
[![NPM License](https://img.shields.io/npm/l/@tianfanfan/scroll-keeper.svg)](https://github.com/tianfanfan/scroll-keeper/blob/master/LICENSE)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/tianfanfan/scroll-keeper/pulls)
[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)

scroll-keeper 项目是一款自动保存元素滚动位置的 vue 组件

scroll-keeper is a HOC for vue to manage DOM scrollTop

### Table of Contents

- [Introduction](#introduction)
- [Feature](#feature)
- [Install](#install)
- [Default import](#default-import)
- [Important notes](#important-notes)
- [License](#license)

### Introduction

This is a component that manages the DOM's scroll for vue

### Feature

Watching for route's changes and set scrollTop

### Install

<!-- encourage using [npm]() to install -->

```sh
npm install @tianfanfan/scroll-keeper
```

### Default Import

Install the components in global:

```javascript
import Vue from 'vue'
import ScrollKeeper from '@tianfanfan/scroll-keeper'

Vue.use(ScrollKeeper)
```

### Example

```html
<template>
  <div class="goodsPage">
    <ScrollKeeper class="scroll" autoSet keeperKey="goodsScroll">
      <ol>
        <li v-for="(good, index) in goodsList" :key="good.id">
          {{good}}
        </li>
      </ol>
    </ScrollKeeper>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        goodsList: [
          {
            id: 1,
            des: 'apple'
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .scroll {
    height: 100px;
    overflow-y: scroll;
  }
</style>
```

### Props

- `autoSet`(default: `true`): need auto set or not.
- `keeperKey` (required: `true`,default: `''`): uuid for current component ,it can be the same in diffrent routeperformance).

### Methods

- `saveScrollTop`: save the slot `scrollTop` and return .
- `setScrollTop` : set the slot `scrollTop` and return .

### Important notes

- ⚠️ You need use `vue router` , set `name` for route option which is using this component. (this component read the name using `this.$route.name`).
- If you set `autoSet: false` you need call `setScrollTop` by yourself.
- It will use `window.scrollkeeperConfig` value to save num.

### License

[MIT](./LICENSE)

[⬆ Back to Top](#table-of-contents)

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