网页虚拟滚动

最新推荐文章于 2023-07-02 02:31:22 发布

90年的罐头�

最新推荐文章于 2023-07-02 02:31:22 发布

阅读量209

点赞数 1

分类专栏： vue 前端 js html 文章标签： css3 前端 css

本文链接：https://blog.csdn.net/weixin_43978604/article/details/120976569

版权

网页虚拟滚动

效果图
- 思路
- 代码

效果图

在这里插入图片描述

思路

类似于轮播图循环滚动，实际加载 3 屏数据，滑动过程动态更新数据，网页性能不受数据量影响

可滚动高度为总数据的高度；
监听滚动事件动态加载 3屏数据；
边界情况需要注意；

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>虚拟滚动</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.13/dist/vue.js"></script>
		<style>
			div {
				box-sizing: border-box;
			}
			html,
			body,
			#app {
				height: 100%;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
			#app {
				display: flex;
				align-items: c

最低0.47元/天解锁文章

90年的罐头�

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
网页虚拟滚动

网页虚拟滚动效果图思路代码效果图思路类似于轮播图循环滚动，实际加载 3 屏数据，滑动过程动态更新数据，网页性能不受数据量影响可滚动高度为总数据的高度；监听滚动事件动态加载 3屏数据；边界情况需要注意；代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device
复制链接

扫一扫