인프런 커뮤니티 질문&답변

엄태인님의 프로필 이미지
엄태인

작성한 질문수

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

2-2-1 [코드설명] 구글, 네이버에서 사용하는 무한스크롤 원리와 구현

왜 data 값을 못 찾는 걸까요?

작성

·

213

0

강의를 보고 이해한거 토대로 직접 코드를 작성해보았는데요. 

다 맞게 작성한 것 같은데 무한스크롤이 안됩니다.ㅠㅠ

로그를 찍어보니 data 변수가 제대로 선언되지 않은 것 같은데 왜 그런걸까요?... 선언하는 위치상으로도 문제가 없는 것 같은데 왜 안되는지 도통 모르겠네요 ㅠㅠ

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="chrome=1,IE=edge">
<title>깡코딩 - 초보자도 만들 수 있는 스크를인터렉션1편</title>
<link rel="stylesheet" type="text/css" href="">
<link rel="stylesheet" type="text/css" href="../../library/css/common.css">
<script type="text/javascript" src="../../library/js/jquery.1.12.4.js"></script>
</head>
<style type="text/css">
.com_tit {margin:100px 0 80px; font-size:70px; text-align: center;}

.sc_infinity {}
.sc_infinity .list {}
.sc_infinity .list:after {clear:both; display:block; content:'';}
.sc_infinity .list li {float:left; width:25%;}
.sc_infinity .list li figure {padding:10px;}

.footer {height:200px;  background-color: #ddd;}
.footer p {padding:50px 20px;}
</style>
<body>
    <div class="wrap">
        <section class="sec01">
            <h2 class="com_tit">INFINITE SCROLL</h2>
            <article class="sc_infinity">
                <ul class="list">
                    <li>
                        <figure>
                            <img src="../images/1.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="../images/2.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="../images/3.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="../images/1.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="../images/2.jpg">
                        </figure>
                    </li>
                    <li>
                        <figure>
                            <img src="../images/3.jpg">
                        </figure>
                    </li>
                </ul>
            </article>
            <div class="footer">
                <p>FOOTER</p>
            </div>
        </section>

    </div>
<script>
    $(function(){
        var target = $('.list'),
            winTop = $(window).scrollTop(),
            onTop = $(document).height() - $(window).height() - $('.footer').height(),
            breakList = 10,
            listCount = 0;

        function getList(){
            var list;

            listCount++;

            if(listCount > breakList){
                list = null;
            } else{
                list = '<li><figure><img src="../images/1.jpg"></figure></li>';
                list += '<li><figure><img src="../images/2.jpg"></figure></li>';
                list += '<li><figure><img src="../images/3.jpg"></figure></li>';
            }

            return list;
        }

        function listCall(){
            
            if(winTop >= onTop){
                var data = getList();
                if(data !== null){
                    target.append(data);
                } else{
                    return false;
                }

            }
        }
        console.log(data);

        $(window).scroll(function(){
            listCall();
        });

        function init(){
            listCall();
        }

        init();
    });
</script>
</body>
</html>










javascriptHTML/CSS인터랙티브 웹jquery

답변 6

1

깡코딩님의 프로필 이미지
깡코딩
지식공유자

첫번째 코드가 작동하지 않는 이유는 스크롤을 할 때 winTop 과 onTop을 업데이트 하지 않아서 이구요

두번째 코드는 스크롤을할때 winTop 과 onTop을 업데이트 해줘서 동작하는 거랍니다 :)

그리고 변수 선언 부분은 지역변수로 선언 하느냐 전역변수로 선언하느냐의 차이겠죠!

전역 변수로 선언하더라도 수강생님이 작성한대로 작성하면 문제 없습니다 :)

그럼 또 다른 궁금증이 생길때 문의주세요 :)

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

업데이트 된다는 의미는 값이 바뀐다는 말이에요:D

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 태인님 :)

winTop 의 값과  onTop의 값을 업데이트 한다는 말은

사용자가 스크롤을 할 때 두개의 값을 계속 업데이트 해준다는 의미입니다.(스크롤을 할 때 값이 바뀐다는 말이죠?)

$(window).scroll 이벤트에서

listCall함수를 계속 호출하죠??

이때 스크롤을 할때마다 listCall 함수 안에 있는 winTop, onTop 두개의 값이 계속 업데이트 되는겁니다.

두개의 값이 업데이트 될때는 새로운 스크롤탑 값과, 계산된 수식 값으로 업데이트 되는 거겠죠?

제시한 첫번째 코드는 lisCall 함수에서 winTop,onTop 두개의 값을 업데이트 하지 않죠?

첫번째 코드의 경우는 페이지가 로드 될때 딱 한번 winTop,onTop 두개의 변수에 값을 대입해주고 업데이트 해주지 않습니다.

그럼 또 다른 궁금증이 생길때 문의주세요 :)

0

엄태인님의 프로필 이미지
엄태인
질문자

업데이트 해준다는 게 어떤 건가요???

첫번째랑 두번째 모두 스크롤시 listCall() 함수를 불러오는 건 똑같은데

어떤 차이점이 있는지 잘 모르겠어요 ㅠㅠ

0

엄태인님의 프로필 이미지
엄태인
질문자

그럼 winTop 과 onTop의 값은 꼭 사용되는 함수 안에서 설정해줘야 하나요?

첫번째 코드처럼 함수 밖에서 선언과 동시에 값을 적었더니 안되고, 두번째 코드처럼 선언은 밖에서 하고 값 지정만 함수 안에서 해줬더니 작동하더라구요... 

이건 어떤 이유 때문일까요?..

  $(function(){
        var target = $('.list'),
            breakList = 10,
            listCount = 0,
            win = $(window);
        
        var winTop = win.scrollTop(); // 스크롤바 위치값을 담는 변수입니다.
        var onTop = $(document).height() - win.height() - $('.footer').height();

        function getList(){
            var list;

            listCount++;

            if(listCount > breakList){
                list = null;
            } else{
                list = '<li><figure><img src="../images/1.jpg"></figure></li>';
                list += '<li><figure><img src="../images/2.jpg"></figure></li>';
                list += '<li><figure><img src="../images/3.jpg"></figure></li>';
            }

            return list;
        }

        function listCall(){ //무한스크롤을 할지 체크하는 함수

        if(winTop >= onTop){ //하단에 도착했을경우

            var data = getList(); //리스트를 가지고옵니다. 실무라면 db에서 조회한 데이터를 가지고 와야합니다.

            if(data !== null){ //리스트가 있을경우에만 리스트를 추가합니다.
                target.append(data);
            }else{
                return false;
            }

        }
        console.log(winTop);
        console.log(onTop);
    }


    $(window).scroll(function(){
            listCall();
        });

        function init(){
            listCall();
        }

        init();
        
   });

 

 $(function(){
        var target = $('.list'),
            breakList = 10,
            listCount = 0,
            win = $(window);
        
        var winTop; // 스크롤바 위치값을 담는 변수입니다.
        var onTop;

        function getList(){
            var list;

            listCount++;

            if(listCount > breakList){
                list = null;
            } else{
                list = '<li><figure><img src="../images/1.jpg"></figure></li>';
                list += '<li><figure><img src="../images/2.jpg"></figure></li>';
                list += '<li><figure><img src="../images/3.jpg"></figure></li>';
            }

            return list;
        }

        function listCall(){ //무한스크롤을 할지 체크하는 함수
            winTop = win.scrollTop(); // 스크롤바 위치값을 담는 변수입니다.
            onTop = $(document).height() - win.height() - $('.footer').height();

        if(winTop >= onTop){ //하단에 도착했을경우

            var data = getList(); //리스트를 가지고옵니다. 실무라면 db에서 조회한 데이터를 가지고 와야합니다.

            if(data !== null){ //리스트가 있을경우에만 리스트를 추가합니다.
                target.append(data);
            }else{
                return false;
            }

        }
        console.log(winTop);
        console.log(onTop);
    }


    $(window).scroll(function(){
            listCall();
        });

        function init(){
            listCall();
        }

        init();
        
   });

0

깡코딩님의 프로필 이미지
깡코딩
지식공유자

안녕하세요 태인님 :)

1.console.log(data); //data 변수는 listCall함수의 지역변수이기 때문에 로그를 찍을때는 선언한 함수안에 작성해보세요

2.스크롤을 진행할때 winTop과 onTop 값이 업데이트 되어야합니다 :D

(잘찾아보세요)! 

그럼 또 다른 궁금증이 생길때 문의주세요 :)

엄태인님의 프로필 이미지
엄태인

작성한 질문수

전체 Q&A
질문하기