跳至主要内容

useScrollIntoView

類似於 element.scrollIntoView() 的 React Hook

Usage​

即時編輯器

function Demo() {
  const targetRef = useRef<HTMLParagraphElement>(null);
  const { scrollIntoView } = useScrollIntoView(targetRef, {
    offset: 60,
  });

  return (
    <div>
      <button onClick={() => scrollIntoView({ alignment: "center" })}>
        滾動到目標
      </button>
      <div style={{ height: "50vh" }} />
      <p ref={targetRef}>你好，這裡是目標</p>
    </div>
  );
}
結果
Loading...

API​

useScrollIntoView​

Returns​

{ scrollIntoView: (animation?: UseScrollIntoViewAnimation | undefined) => void; cancel: () => void; }: 包含以下元素的對象：

  • scrollIntoView：滚動進入視口函數。
  • cancel： 取消滚動函數。

Arguments​

參數名描述類型預設值
targetElementdom对象BasicTarget<HTMLElement> (必填)-
params可选参数UseScrollIntoViewParams | undefined-
scrollElement滚动容器BasicTarget<HTMLElement>-

UseScrollIntoViewAnimation​

參數名描述類型預設值
alignment基于当前轴的目标元素相对于父元素的对齐方式'start' | 'end' | 'center'-

UseScrollIntoViewParams​

參數名描述類型預設值
onScrollFinish滚动完成回调() => void-
duration滚动时间number1250
axis滚动方向'x' | 'y'y
easing自定义缓和数学函数(t: number) => number(t: number) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
offset最近的边缘和元素之间的附加距离number0
cancelable指示动画是否可能因用户滚动而中断booleantrue
isList防止内容在具有多个目标的滚动列表中跳跃boolean-

BasicTarget​

export type BasicTarget<T extends TargetType = Element> = (() => TargetValue<T>) | TargetValue<T> | MutableRefObject<TargetValue<T>>;

TargetValue​

type TargetValue<T> = T | undefined | null;

TargetType​

type TargetType = HTMLElement | Element | Window | Document | EventTarget;