81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
||
|
||
export type AnchorScrollType = {
|
||
el: HTMLElement;
|
||
currentIndex: number;
|
||
container: string;
|
||
offsetTop?: number;
|
||
};
|
||
|
||
export function useAnchorScroll({
|
||
el, // 当前元素
|
||
currentIndex, // 当前index值
|
||
container, // 所有锚点的父元素容器
|
||
offsetTop = 0 // 偏移量
|
||
}: AnchorScrollType) {
|
||
let isClickRef = useRef(false);
|
||
let timer: any = useRef(null);
|
||
const [newIndex, setNewIndex] = useState(0);
|
||
|
||
function clickHandler() {
|
||
if (el) {
|
||
window.scroll({
|
||
top: el.offsetTop - offsetTop,
|
||
behavior: "smooth"
|
||
});
|
||
}
|
||
setNewIndex(currentIndex);
|
||
|
||
isClickRef.current = true;
|
||
if (timer.current) clearTimeout(timer.current);
|
||
timer.current = setTimeout(() => {
|
||
isClickRef.current = false;
|
||
}, 1000);
|
||
}
|
||
|
||
function scrollHanlder() {
|
||
if (isClickRef.current) return;
|
||
const navContents = document.querySelectorAll(container);
|
||
|
||
const offsetTopArr = [] as any;
|
||
navContents.forEach((item: any) => {
|
||
offsetTopArr.push(item.offsetTop);
|
||
});
|
||
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
|
||
|
||
for (let n = 0; n < offsetTopArr.length; n++) {
|
||
if (scrollTop + offsetTop >= offsetTopArr[n]) {
|
||
setNewIndex(n);
|
||
}
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (newIndex === currentIndex) return;
|
||
clickHandler();
|
||
}, [el, currentIndex]);
|
||
|
||
useEffect(() => {
|
||
window.addEventListener("scroll", scrollHanlder);
|
||
return () => window.removeEventListener("scroll", scrollHanlder);
|
||
}, []);
|
||
|
||
return newIndex;
|
||
}
|
||
|
||
// 在组件页面使用修改为以下方式：
|
||
// import { useAnchorScroll } from './hooks';
|
||
// const [currentIndex, setCurrentIndex] = React.useState<any>(0);
|
||
// const [el, setEl] = React.useState<any>(null);
|
||
// const newIndex = useAnchorScroll({
|
||
// el,
|
||
// currentIndex,
|
||
// container: '.module-content',
|
||
// offsetTop: 130,
|
||
// });
|
||
// !!!注意：slide-bar部分修改为newIndex
|
||
// <div
|
||
// className={`slide-bar slide-bar-${newIndex}`}
|
||
// style={{ top: `${newIndex * 48}px` }}
|
||
// ></div>
|