현재 버전

모바일웹 반응형 질문



const [Show, setShow] = useState(false);
    const [scrollPosition, setScrollPosition] = useState(0);
    const updateScroll = () => {
        setScrollPosition(window.scrollY || document.documentElement.scrollTop);
    }
    const showImage = () => {
        if(scrollPosition > 1100){
            setShow(true);
        } 
    }
    useEffect(()=>{
        window.addEventListener('scroll', updateScroll);
        window.addEventListener('scroll', showImage);
    });


위와같이 웹에서는 스크롤이 1100 넘어가면 이미지가 나오게끔 했습니다.

그런데 문제는 모바일로 바꾸니 화면이 줄어들어 거의 스크롤 마지막쯤 가야

첫번째 이미지가 등장하고 나머지 이미지는 아예 안뜨게 되버렸습니다...


어떻게 해야 모바일일때는 다르게 적용시킬 수 있을까요..??

모바일웹 반응형 CSS는 @media screen and (max-width: 500px) 로 처리했습니다.


수정 이력

2021-05-12 17:08:56 에 아래 내용에서 변경 됨 #1


const [Show, setShow] = useState(false);
    const [scrollPosition, setScrollPosition] = useState(0);
    const updateScroll = () => {
        setScrollPosition(window.scrollY || document.documentElement.scrollTop);
    }
    const showImage = () => {
        if(scrollPosition > 1100){
            setShow(true);
        } 
    }
    useEffect(()=>{
        window.addEventListener('scroll', updateScroll);
        window.addEventListener('scroll', showImage);
    });


위와같이 웹에서는 스크롤이 1100 넘어가면 이미지가 나오게끔 했습니다.

그런데 문제는 모바일로 바꾸니 화면이 줄어들어 거의 스크롤 마지막쯤 가야

첫번째 이미지가 등장하고 나머지 이미지는 아예 안뜨게 되버렸습니다...


어떻게 해야 모바일일때는 다르게 적용시킬 수 있을까요..??

모바일웹 반응형은 @media screen and (max-width: 500px) 으로 처리했습니다.