页面滚动时, 只显示当前可视范围内的元素, 其他隐藏,

最新推荐文章于 2022-12-07 14:37:05 发布

cen备忘录

最新推荐文章于 2022-12-07 14:37:05 发布

阅读量1.7k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/cen_cs/article/details/83503495

版权

js 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

页面滚动时, 只显示当前可视范围内的元素, 其他元素隐藏, 这个好处是: 页面的更新只会渲染可视范围内的元素, 其他因为是隐藏不会触发重绘重排, 提升页面流畅度.

直接上代码

<!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

cen备忘录

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
页面滚动时, 只显示当前可视范围内的元素, 其他隐藏,

页面滚动时, 只显示当前可视范围内的元素, 其他元素隐藏, 这个好处是: 页面的更新只会渲染可视范围内的元素, 其他因为是隐藏不会触发重绘重排, 提升页面流畅度.直接上代码&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name=&q
复制链接

扫一扫