Commit 991b7a6f authored by 前端-钟卫鹏's avatar 前端-钟卫鹏

fix: 优化滑动跳转效果

parent aafd9e85
......@@ -32,9 +32,7 @@ const BidDetailHeader:React.FC<BidDetailHeaderProps> = ({
const [current, setCurrent] = useState<number>(0)
const [isFixed, setIsFixed] = useState<boolean>(false)
useEffect(() => {
// window.addEventListener("scroll", debounce(onScroll, 500));
window.addEventListener("scroll", onScroll)
return (()=>{
window.removeEventListener('scroll', onScroll)
......@@ -49,50 +47,36 @@ const BidDetailHeader:React.FC<BidDetailHeaderProps> = ({
setCurrent(index)
}
})
// // @todo 不使用防抖情况下 焦点会出现抖动;使用防抖,固定头部会延迟或者无效
// // 锚点导航距离顶端距离
// let navDom: any = document.getElementById("anchorTitle")
// if(navDom) {
// let distance = navDom.offsetTop - document.documentElement.scrollTop
// if(!flagRef.current.flag) {
// flagRef.current.distanceTop = navDom.offsetTop
// flagRef.current.flag = true
// }
// 锚点导航距离顶端距离
let navDom: any = document.getElementById("anchorTitle")
if(navDom) {
let distance = navDom.offsetTop - document.documentElement.scrollTop
if(!flagRef.current.flag) {
flagRef.current.distanceTop = navDom.offsetTop
flagRef.current.flag = true
}
// if(distance <= 0) {
// setIsFixed(true)
// }
if(distance <= 0) {
setIsFixed(true)
}
// if(document.documentElement.scrollTop <= flagRef.current.distanceTop) {
// setIsFixed(false)
// }
// }
if(document.documentElement.scrollTop <= flagRef.current.distanceTop) {
setIsFixed(false)
}
}
}
const clickItem = (index: any) => {
setCurrent(index)
console.log(formContext.offsetTopList, 'context', formContext.offsetTopList[index])
let distance = formContext.offsetTopList[index] - 140
window.scrollTo({
top: distance < 0 ? 0 : distance,
behavior: "smooth"
});
if(index > 0) setIsFixed(true)
else setIsFixed(false)
})
let dom = document.documentElement || document.body
if(formContext.offsetTopList[index] - 189 + dom.clientHeight >= dom.scrollHeight) {
setCurrent(index)
}
}
// // 简单的防抖动函数
// const debounce = (func, wait, immediate?) => {
// // setIsFixed(true)
// // 定时器变量
// let timeout;
// return () => {
// // 每次触发 scroll handler 时先清除定时器
// clearTimeout(timeout);
// // 指定 xx ms 后触发真正想进行的操作 handler
// timeout = setTimeout(func, wait);
// };
// }
return (
<div className={isFixed ? [style.detailHeader, style.anchorTitleFixed].join(' '): style.detailHeader} id="detailHeader">
......
......@@ -40,18 +40,6 @@ const BidMaterial: React.FC<BidMaterialProps> = ({cardTitle}) => {
const titleMap = ['基本信息', '产地', '外观尺寸', '工艺', '特殊说明', '附件', '采购数量']
// // 简单的防抖动函数
// const debounce = (func, wait, immediate?) => {
// // 定时器变量
// let timeout;
// return () => {
// // 每次触发 scroll handler 时先清除定时器
// clearTimeout(timeout);
// // 指定 xx ms 后触发真正想进行的操作 handler
// timeout = setTimeout(func, wait);
// };
// }
const onScroll = (e) => {
if(e.target.className === 'ant-drawer-body') {
let scrollTop = document.querySelectorAll(".ant-drawer-body")[0].scrollTop
......@@ -121,11 +109,15 @@ const BidMaterial: React.FC<BidMaterialProps> = ({cardTitle}) => {
}
const handleClick = (i: number) => {
setCurrent(i)
document.querySelectorAll(".ant-drawer-body")[0].scroll({
let dom = document.querySelectorAll(".ant-drawer-body")[0]
dom.scroll({
'top': offsetTopList[i] - 16,
behavior: "smooth",
})
// scrollTop + clientHeight == scrollHeight
if(offsetTopList[i] + dom.clientHeight >= dom.scrollHeight) {
setCurrent(i)
}
}
return (<>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment