页面滚动时, 只显示当前可视范围内的元素, 其他元素隐藏, 这个好处是: 页面的更新只会渲染可视范围内的元素, 其他因为是隐藏 不会触发重绘重排, 提升页面流畅度.
直接上代码
<!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