@tianfanfan/scroll-keeper

scroll-keeper

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

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

Table of Contents

• Introduction
• Feature
• Install
• Default import
• Important notes
• License

Introduction

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

Feature

Watching for route's changes and set scrollTop

Install

npm install @tianfanfan/scroll-keeper

Default Import

Install the components in global:

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

Vue.use(ScrollKeeper)

Example

<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

Back to Top