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>