页面滚动时, 只显示当前可视范围内的元素, 其他元素隐藏, 这个好处是: 页面的更新只会渲染可视范围内的元素, 其他因为是隐藏 不会触发重绘重排, 提升页面流畅度.
直接上代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>只显示可视范围内的页面元素</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style> ul li{height:100px;border:1px solid #ccc;} #wrap{height:500px;overflow:auto} .hide span{display:none} </style> </head> <body> <div id="wrap"> <ul> <li ><span>0001 </span></li> <li ><span>0002 </span></li> <li ><span>0003 </span></li> <li ><span>0004 </span></li> <li class="hide"><span>0005 </span></li> <li class="hide"><span>0006 </span></li> <li class="hide"><span>0007 </span></li> <li class="hide"><span>0008 </span></li> <li class="hide"><span>0009 </span></li> <li class="hide"><span>00010</span></li> <li class="hide"><span>00011</span></li> <li class="hide"><span>00012</span></li> <li class="hide"><span>00013</span></li> <li class="hide"><span>00014</span></li> <li class="hide"><span>00015</span></li> <li class="hide"><span>00016</span></li> <li class="hide"><span>00017</span></li> <li class="hide"><span>00018</span></li> <li class="hide"><span>00019</span></li> <li class="hide"><span>00020</span></li> <li class="hide"><span>00021</span></li> <li class="hide"><span>00022</span></li> <li class="hide"><span>00023</span></li> <li class="hide"><span>00024</span></li> <li class="hide"><span>00025</span></li> <li class="hide"><span>00026</span></li> <li class="hide"><span>00027</span></li> <li class="hide"><span>00029</span></li> <li class="hide"><span>00030</span></li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { $("#wrap li:gt(1)").addClass("hide"); var $win = $(window); //var itemOffsetTop = $("#item").offset().top; //var itemOuterHeight = $("#item").outerHeight(); var winHeight = $win.height(); $("#wrap").scroll(function () { var winScrollTop = $win.scrollTop(); var lis= $('ul').find("li"); $.each(lis, function (index, item) { var curItem = $(item); var itemOffsetTop = curItem.offset().top; var itemOuterHeight = curItem.outerHeight(); if(!(winScrollTop > itemOffsetTop+itemOuterHeight) && !(winScrollTop < itemOffsetTop-winHeight)) { console.log(item.innerHTML,'出现了'); //curItem.show() curItem.removeClass("hide"); } else { //curItem.hide() curItem.addClass("hide"); console.log(item.innerHTML,'消失了'); } }); }) }) </script> </body> </html>参考资料: http://www.cnblogs.com/Zell-Dinch/articles/4647620.html
