1.0.9 • Published 10 months ago

rc-scroll-into-view v1.0.9

Weekly downloads
-
License
ISC
Repository
github
Last release
10 months ago

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

Install

yarn add rc-scroll-into-view

or

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

Usage

import React, { useRef } from 'react';
import ScrollIntoView from 'rc-scroll-into-view';
const App = () => {
  const ref = useRef();
  return (
    <ScrollInto scrollRef={ref} scrollOptions={{ block: 'center', behavior: 'smooth' }}>
      <div ref={ref}>child</div>
    </ScrollInto>
  );
};
export default App;

使用 selector

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

使用 ref

import React, { useRef } from 'react';
import ScrollInto from 'rc-scroll-into-view';
const App = () => {
  const ref = useRef();
  return (
    <ScrollInto scrollRef={ref} scrollOptions={{ block: 'center', behavior: 'smooth' }}>
      <div ref={ref}>child</div>
    </ScrollInto>
  );
};
export default App;

使用 target

import React, { useRef } from 'react';
import ScrollInto from 'rc-scroll-into-view';
const App = () => {
  const targetRef = useRef();
  const ref = useRef();
  return (
    <ScrollInto
      scrollRef={ref}
      target={targetRef}
      scrollOptions={{ block: 'center', behavior: 'smooth' }}
    >
      <div ref={targetRef}>
        这是另一个child
        <div ref={ref}>child</div>
      </div>
    </ScrollInto>
  );
};
export default App;

API

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

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago