当某一个节点还没有渲染出来，但这个时候又调用了js 原生的scrollIntoView；或者这个节点已经生成，方法也成功调用，但是又被其他晚加载的元素顶掉了，导致scrollIntoView失效。这个库就是用来解决这种情况。妈妈再也不用担心scrollIntoView失效了！！！ rc-scroll-into-view.

Install

yarn add rc-scroll-into-view

or

npm install rc-scroll-into-view --save

Usage

1import React, { useRef } from 'react';
2import ScrollIntoView from 'rc-scroll-into-view';
3const App = () => {
4  const ref = useRef();
5  return (
6    <ScrollInto scrollRef={ref} scrollOptions={{ block: 'center', behavior: 'smooth' }}>
7      <div ref={ref}>child</div>
8    </ScrollInto>
9  );
10};
11export default App;

使用 selector

1import React from 'react';
2import ScrollInto from 'rc-scroll-into-view';
3const App = () => (
4  <ScrollInto selector="#test" scrollOptions={{ block: 'center', behavior: 'smooth' }}>
5    <div id="test">child</div>
6  </ScrollInto>
7);
8export default App;

使用 ref

1import React, { useRef } from 'react';
2import ScrollInto from 'rc-scroll-into-view';
3const App = () => {
4  const ref = useRef();
5  return (
6    <ScrollInto scrollRef={ref} scrollOptions={{ block: 'center', behavior: 'smooth' }}>
7      <div ref={ref}>child</div>
8    </ScrollInto>
9  );
10};
11export default App;

使用 target

1import React, { useRef } from 'react';
2import ScrollInto from 'rc-scroll-into-view';
3const App = () => {
4  const targetRef = useRef();
5  const ref = useRef();
6  return (
7    <ScrollInto
8      scrollRef={ref}
9      target={targetRef}
10      scrollOptions={{ block: 'center', behavior: 'smooth' }}
11    >
12      <div ref={targetRef}>
13        这是另一个child
14        <div ref={ref}>child</div>
15      </div>
16    </ScrollInto>
17  );
18};
19export default App;

API

属性	说明	类型	默认值	版本
selector	需要滚动的选择器字段	string	--	1.0.0
scrollOptions	滚动属性配置	ScrollIntoViewOptions	--	1.0.0
isScrollable	是否需要滚动	boolean	--	1.0.0
scrollRef	需要滚动的元素的 ref	MutableRefObject<HTMLElement | null>	--	1.0.0
target	父节点：用来判断什么时候停止监听页面是否发生改变	Element | () => Element | MutableRefObject<Element>	document	1.0.0