div에 무한스크롤 적용하기 질문입니다.

div에 무한스크롤 적용하기 질문입니다. 채택완료

Jiah 8년 전 조회 4,265

모바일로 썼더니 소스를 못 넣어서 다시 올려요

divBodyScroll 라는 div 에 overflow-y:scroll 이 적용되어 있구요 search_data_table 라는 테이블이 divBodyScroll 안에 있습니다. 지금 작동은 되는데 133이라는 표 헤더 부분을 빼줬더니 동작이 되다가 말다가 하네요 무한 스크롤 소스가 document.height == window.height + window.scrolltop 으로 계산되서 스크롤이 끝에 닿으면 나오게 하는건 알겠는데요. 제가 만든 소스에서는 document 가 없는 div의 스크롤이 끝에 닿으면 동작되어야 하다보니 계산이 안 맞더라고요;; 어떻게 해야 하나요?

스크립트 소스입니다.

</p>

<p>// divBodyScroll의 스크롤이 동작할때에 함수를 불러옵니다.

  $('#divBodyScroll').scroll(function () {

   var current_mode = document.getElementById('current_mode').innerText;

   

   //스크롤 끝까지 닿으면 새로운 데이터 50개를 불러온다    

   var dh = $('#search_data_table').height();

   var wt = $('#divBodyScroll').scrollTop();</p>

<p>   if (dh == (wt+133)) {

    start += list;

    if(current_mode == '0'){

     append_list();

    }else{

     append_list_detail();

    }

    

   }

   //스크롤 끝까지 닿으면 새로운 데이터 50개를 불러온다 끝</p>

<p>});</p>

<p>

해당 div 소스입니다.

</p>

<p><div id="divHeadScroll">

                        <table id="tblHead" border="0" >

                            <colgroup>

                                <col style="width:69px;" />

                                <col style="width:90px;" />

                            </colgroup>

                            <tr>

                                <th>제목</th>

                                <th>내용</th>

                            </tr>

                        </table>

                    </div>

                    <div id="divBodyScroll">

                      <table id="tblBody" border="0">

                          <tr id="search_data_table">

                          </tr>

                      </table>

                   </div></p>

<p>

div에 무한스크롤 적용하기 질문입니다. 채택완료

답변 1개

공유하기