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(); }); /*$('#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>