|
|
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>
|
