jQuery 게으른로드를 사용하여 스크롤 할 때 더 많은 내용을로드하는 방법

Question

안녕하세요, 내 페이지에서 게으른로드를 사용하려고합니다. 첫눈에는 첫 번째 3 div 아이가 표시됩니다. 그런 다음 스크롤 후 크기에 따라 증가합니다. 더 많은 정보를로드하려면 클릭 행동을 시도했습니다. 하지만 스크롤 기능을 추가하고 싶습니다. 내 코드 아래

$(document).ready(function() { 
 
    size_li = $("#myList li").size(); 
 
    x=3; 
 
    $('#myList li:lt('+x+')').show(); 
 
    $('#loadMore').click(function() { 
 
     x= (x+5 <= size_li) ? x+5 : size_li; 
 
     $('#myList li:lt('+x+')').show(); 
 
    }); 
 
    $('#showLess').click(function() { 
 
     x=(x-5<0) ? 3 : x-5; 
 
     $('#myList li').not(':lt('+x+')').hide(); 
 
    }); 
 
});

#myList li{ display:none; 
 
} 
 
#loadMore { 
 
    color:green; 
 
    cursor:pointer; 
 
} 
 
#loadMore:hover { 
 
    color:black; 
 
} 
 
#showLess { 
 
    color:red; 
 
    cursor:pointer; 
 
} 
 
#showLess:hover { 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
    <li>Thirteen</li> 
 
    <li>Fourteen</li> 
 
    <li>Fifteen</li> 
 
    <li>Sixteen</li> 
 
    <li>Seventeen</li> 
 
    <li>Eighteen</li> 
 
    <li>Nineteen</li> 
 
    <li>Twenty one</li> 
 
    <li>Twenty two</li> 
 
    <li>Twenty three</li> 
 
    <li>Twenty four</li> 
 
    <li>Twenty five</li> 
 
</ul> 
 
<div id="loadMore">Load more</div> 
 
<div id="showLess">Show less</div>

는

Answer 1

jQuery를 스크롤 이벤트를 사용

편집 조각은 다음과 같습니다. 다른 것을 달성해야하는 경우 알려주십시오.

$(document).ready(function() { 
 
    size_li = $("#myList li").size(); 
 
    x=3; 
 
    $('#myList li:lt('+x+')').show(); 
 
    var heightVal = $('#myList').height(); 
 
    $('#myList').css('max-height', heightVal-1); 
 
    $('#myList').bind('mouseover',function(){ 
 
     $('#myList').css('overflow-y', 'auto'); 
 
    }); 
 
    $("#myList").scroll(function() { 
 
     x= (x+5 <= size_li) ? x+5 : size_li; 
 
     $('#myList li:lt('+x+')').show(); 
 
\t \t }); 
 
    /*$('#loadMore').click(function() { 
 
     
 
    }); 
 
    $('#showLess').click(function() { 
 
     x=(x-5<0) ? 3 : x-5; 
 
     $('#myList li').not(':lt('+x+')').hide(); 
 
    });*/ 
 
});

#myList { 
 
    /*max-height : 100px;*/ 
 
    overflow-y : hidden; 
 
} 
 

 
#myList li{ 
 
    display:none; 
 
} 
 
#loadMore { 
 
    color:green; 
 
    cursor:pointer; 
 
} 
 
#loadMore:hover { 
 
    color:black; 
 
} 
 
#showLess { 
 
    color:red; 
 
    cursor:pointer; 
 
} 
 
#showLess:hover { 
 
    color:black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="myList"> 
 
    <li>One</li> 
 
    <li>Two</li> 
 
    <li>Three</li> 
 
    <li>Four</li> 
 
    <li>Five</li> 
 
    <li>Six</li> 
 
    <li>Seven</li> 
 
    <li>Eight</li> 
 
    <li>Nine</li> 
 
    <li>Ten</li> 
 
    <li>Eleven</li> 
 
    <li>Twelve</li> 
 
    <li>Thirteen</li> 
 
    <li>Fourteen</li> 
 
    <li>Fifteen</li> 
 
    <li>Sixteen</li> 
 
    <li>Seventeen</li> 
 
    <li>Eighteen</li> 
 
    <li>Nineteen</li> 
 
    <li>Twenty one</li> 
 
    <li>Twenty two</li> 
 
    <li>Twenty three</li> 
 
    <li>Twenty four</li> 
 
    <li>Twenty five</li> 
 
</ul> 
 
<div id="loadMore">Load more</div> 
 
<div id="showLess">Show less</div>

당신은 기본적으로 스크롤 이벤트를 수신 할