react-memo-scroller

react scrollbar

Usage no npm install needed!

<script type="module">
  import reactMemoScroller from 'https://cdn.skypack.dev/react-memo-scroller';
</script>

README

ReactMemoScroller

将MemoScroller代替常规的overflow: auto元素，在组件销毁时将会保存滚动位置并在下一次组件加载时进行还原。你也可以在合适的时机手动触发还原。在组件上设置的style和className会被原样设置到容器元素上。

usage

import MemoScroller from 'react-memo-scroller'

<MemoScroller ref={ms} identify="home" inputs={inputs>
    // ....
</MemoScroller>

prop

identify *

string

组件的唯一标识，作为保存滚动信息时的key, 必须确保与其他memo-scroller组件不重复

inputs

array

一个依赖数组，与useEffect(fn, inputs)表现一直,当数组中的某一项发生改变时，滚动位置会被设置为0。当需要在某些状态改变后还原容器滚动位置可以使用此方法。

ref

instance.boxEl

指向容器所在的原生html元素, 在传入el时，指向el

instance.backMemo()

组件只会在初始化时尝试还原滚动条状态，如果是做分页等或是其他的children会频繁发生变化的场景下，可以选择在合适的时机手动触发backMemo()来还原滚动位置。