Solving the issue of scrollIntoView failing during asynchronous scrolling in JavaScript.
npm install rc-scroll-into-view
当某一个节点还没有渲染出来，但这个时候又调用了js 原生的scrollIntoView；或者这个节点已经生成，方法也成功调用，但是又被其他晚加载的元素顶掉了，导致scrollIntoView失效。这个库就是用来解决这种情况。妈妈再也不用担心scrollIntoView失效了！！！ rc-scroll-into-view.
yarn add rc-scroll-into-view
or
npm install rc-scroll-into-view --save
``js`
import React, { useRef } from 'react';
import ScrollIntoView from 'rc-scroll-into-view';
const App = () => {
const ref = useRef();
return (
child
);
};
export default App;
`jsx`
import React from 'react';
import ScrollInto from 'rc-scroll-into-view';
const App = () => (
child
);
export default App;
`jsx`
import React, { useRef } from 'react';
import ScrollInto from 'rc-scroll-into-view';
const App = () => {
const ref = useRef();
return (
child
);
};
export default App;
`jsx`
import React, { useRef } from 'react';
import ScrollInto from 'rc-scroll-into-view';
const App = () => {
const targetRef = useRef();
const ref = useRef();
return (
target={targetRef}
scrollOptions={{ block: 'center', behavior: 'smooth' }}
>
这是另一个child
child
);
};
export default App;
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| selector | 需要滚动的选择器字段 | string | -- | 1.0.0 |ScrollIntoViewOptions
| scrollOptions | 滚动属性配置 | | -- | 1.0.0 |boolean
| isScrollable | 是否需要滚动 | | -- | 1.0.0 |MutableRefObject
| scrollRef | 需要滚动的元素的 ref | | -- | 1.0.0 |Element
| target | 父节点：用来判断什么时候停止监听页面是否发生改变 | \| () => Element \| MutableRefObject | document` | 1.0.0 |