메뉴 스크롤

This commit is contained in:
focp212@naver.com
2025-10-14 18:24:08 +09:00
parent 31478d1659
commit 85fb8cae49
3 changed files with 41 additions and 37 deletions

View File

@@ -136,3 +136,6 @@ main.home-main{
.pb-86{ .pb-86{
padding-bottom: 86px; padding-bottom: 86px;
} }
.bottom-tabbar{
transition: all 0.5s ease-out;
}

View File

@@ -42,18 +42,22 @@ export const Menu = ({
navigate(path); navigate(path);
}; };
const onClickToMenuNavigate = (menuId: string, index: number) => { const onClickToMenuNavigate = (menuId: string, index: number) => {
setShortBoxOnScroll(false);
setMenuListOnScroll(false);
let tops = [0, 255, 410, 565, 720, 875, 1030, 1500]; let tops = [0, 255, 410, 565, 720, 875, 1030, 1500];
let lefts = [0, 85, 170, 275, 360, 450, 450, 450];
setShortBtnIdx(index);
scrollRef.current?.scrollTo({ scrollRef.current?.scrollTo({
top: tops[index], top: tops[index],
left: 0, left: 0,
behavior: 'smooth' behavior: 'smooth'
}); });
/* shortBtnScrollRef.current?.scrollTo({
buttonRefs.current[index]?.scrollIntoView({ top: 0,
left: lefts[index],
behavior: 'smooth' behavior: 'smooth'
}); });
*/
}; };
const onClickToMenuClose = () => { const onClickToMenuClose = () => {
if(editMode){ if(editMode){
@@ -101,36 +105,36 @@ export const Menu = ({
}; };
const shortBtnScroll = (e: any) => { const shortBtnScroll = (e: any) => {
let x = shortBtnScrollRef.current?.scrollLeft;
let top = 0;
if(x){
if(x < 85){
top = 0;
setShortBtnIdx(0);
}
else if(x < 170){
top = 255;
setShortBtnIdx(1);
}
else if(x < 275){
top = 410;
setShortBtnIdx(2);
}
else if(x < 360){
top = 565;
setShortBtnIdx(3);
}
else if(x < 450){
top = 720;
setShortBtnIdx(4);
}
else{
top = 875;
setShortBtnIdx(5);
}
}
if(shortBoxOnScroll){ if(shortBoxOnScroll){
let x = shortBtnScrollRef.current?.scrollLeft;
let top = 0;
if(x){
if(x < 85){
top = 0;
setShortBtnIdx(0);
}
else if(x < 170){
top = 255;
setShortBtnIdx(1);
}
else if(x < 275){
top = 410;
setShortBtnIdx(2);
}
else if(x < 360){
top = 565;
setShortBtnIdx(3);
}
else if(x < 450){
top = 720;
setShortBtnIdx(4);
}
else{
top = 875;
setShortBtnIdx(5);
}
}
scrollRef.current?.scrollTo({ scrollRef.current?.scrollTo({
top: top, top: top,
left: 0, left: 0,
@@ -172,9 +176,6 @@ export const Menu = ({
behavior: 'smooth' behavior: 'smooth'
}); });
} }
/*
*/
}; };
const shortBoxTouchStart = () => { const shortBoxTouchStart = () => {
setShortBoxOnScroll(true); setShortBoxOnScroll(true);

View File

@@ -14,7 +14,7 @@ export const FooterNavigation = ({
setFavoriteEdit setFavoriteEdit
}: FooterProps) => { }: FooterProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [isFooterOn, setIsFooterOn] = useState<boolean>(false); const [isFooterOn, setIsFooterOn] = useState<boolean>(true);
const onClickToNavigate = (path?: string) => { const onClickToNavigate = (path?: string) => {
if(!!path){ if(!!path){