学会前端假造滚动，看这篇就够了

一. 假造滚动是什么？

前端假造滚动是一种用于优化长列表或大量数据展示的技术。它的重要原理是只渲染用户当前可见区域的数据，而不是一次性渲染整个列表或数据集。
在传统的列表渲染中，如果数据量很大，渲染所有数据可能会导致性能下降，特别是在滚动时。假造滚动通过动态盘算可见区域的位置和需要渲染的数据范围，只渲染可见区域内的部分数据，并在滚动时及时更新渲染的内容。
总结下就是：

• 接口返回了大量数据，前端将大量数据保存起来;
  
• 假造滚动的策略是：由于无论你返回了多大的数据量，用户可以看到的永远只是可视区域展示的数据，只是大量数据的很少一部分,所以保证可视区域的数据正常渲染就行。
  

二. 假造滚动怎么实现？

先上代码直观体验下
index.vue

1. <template>
2.   <div class="container">
3.     <my-virtual-scroller :items="list" />
4.   </div>
5. </template>
7. <script>
8. import myVirtualScroller from './myVirtualScroller.vue'
9. // 模拟一个长列表
10. const list = []
11. for(let i=0; i<10000; i++) {
12.   list.push({
13.     id: i,
14.     label: `virtual-list ${i}`
15.   })
16. }
17. export default {
18.   components: {
19.     myVirtualScroller
20.   },
21.   data() {
22.     return {
23.       list: list
24.     }
25.   }
26. }
27. </script>
29. <style scoped>
30. .container {
31.   height: 300px;
32.   border: 1px solid #ccc;
33. }
34. </style>

复制代码

myVirtualScroller.vue

1. // 传入数据可以实现虚拟滚动事件
2. // 这是一个封装好的子组件 传入数组进行渲染
3. <template>
4.   <!-- 最底层的可视区容器 -->
5.   <div ref="list" class="infinite-list-container" @scroll="scrollEvent($event)">
6.     <!-- 中间的可滚动区域，z-index=-1，高度和真实列表相同，目的是出现相同的滚动条 -->
7.     <div
8.       class="infinite-list-phantom"
9.       :style="{ height: listHeight + 'px' }"
10.     ></div>
11.     <!-- 最上层的可视区列表，数据和偏移距离随着滚动距离的变化而变化 -->
12.     <div class="infinite-list" :style="{ transform: getTransform }">
13.       <div
14.         class="infinite-list-item"
15.         v-for="item in visibleData"
16.         :key="item.id"
17.         :style="{ height: itemSize + 'px' }"
18.       >
19.         {{ item.label }}
20.       </div>
21.     </div>
22.   </div>
23. </template>
25. <script>
26. export default {
27.   name: "MyVirtualList",
28.   props: {
29.     //父组件传过来的数据
30.     items: {
31.       type: Array,
32.       default: () => [],
33.     },
34.     //可视区域每一项的高度 没有传参的话默认高度是100px
35.     itemSize: {
36.       type: Number,
37.       //没有高度的话 高度会默认是100px
38.       default: 100,
39.     },
40.   },
41.   computed: {
42.     //列表总高度
43.     listHeight() {
44.       // 计算当前传值数据的总长度 * 每个盒子的高度 计算出所有数据的整体高度
45.       return this.items.length * this.itemSize;
46.     },
47.     //可视区列表的项数
48.     visibleCount() {
49.       return Math.ceil(this.screenHeight / this.itemSize);
50.     },
51.     //可视区列表偏移距离对应的样式
52.     getTransform() {
53.       return `translate3d(0,${this.startOffset}px,0)`;
54.     },
55.     //获取可视区列表数据
56.     visibleData() {
57.       // 截取出可视区域显示的盒子 进行渲染
58.       return this.items.slice(
59.         this.start,
60.         Math.min(this.end, this.items.length)
61.       );
62.     },
63.   },
64.   mounted() {
65.     // 获取可是区域的高度
66.     this.screenHeight = this.$refs.list.clientHeight;
67.     // 开始
68.     this.start = 0;
69.     // 结束
70.     this.end = this.start + this.visibleCount;
71.   },
72.   data() {
73.     return {
74.       screenHeight: 0, //可视区域高度
75.       startOffset: 0, //偏移距离
76.       start: 0, //起始索引
77.       end: 0, //结束索引
78.     };
79.   },
80.   methods: {
81.     scrollEvent() {
82.       //当前滚动条滚动位置
83.       let scrollTop = this.$refs.list.scrollTop;
84.       //此时的开始索引 使用当前滚动条高度 / 盒子高度 拿到的是当前是哪一个盒子为第一个
85.       this.start = Math.floor(scrollTop / this.itemSize);
86.       //此时的结束索引
87.       //获取到当前第一个盒子的数值 加 计算好可视区域可容纳多少盒子的值
88.       this.end = this.start + this.visibleCount;
89.       //此时的偏移距离
90.       this.startOffset = scrollTop - (scrollTop % this.itemSize);
91.   
92.     },
93.   },
94. };
95. </script>
97. <style scoped>
98. .infinite-list-container {
99.   height: 100%;
100.   overflow: auto;
101.   position: relative;
102. }
104. .infinite-list-phantom {
105.   position: absolute;
106.   left: 0;
107.   top: 0;
108.   right: 0;
109. }
111. .infinite-list {
112.   left: 0;
113.   right: 0;
114.   top: 0;
115.   position: absolute;
116. }
118. .infinite-list-item {
119.   line-height: 50px;
120.   text-align: center;
121.   color: #555;
122.   border: 1px solid #ccc;
123.   box-sizing: border-box;
124. }
125. </style>

复制代码

假造滚动的思路总结如下：
1. 确定视窗位置：通过获取列表滚动区域的scrollTop属性，确定当前视窗的位置;
2. 盘算需要渲染的节点：根据视窗位置和子节点的高度，盘算出需要真实渲染的节点范围。可以使用Math.floor(scrollTop/itemHeight)和Math.ceil(viewHeight/itemHeight)来确定起始索引和渲染的节点数量;
3. 移动渲染的节点到视窗内：将需要渲染的节点移动到视窗内，可以通过修改节点的位置或使用其他方式实现;
4. 按需加载数据：根据滚动位置，动态加载相应的数据，只加载当前视窗可见范围内的数据，减少数据量和渲染负担;
5. 处理滚动变乱：监听滚动变乱，根据滚动位置及时更新需要渲染的节点和数据。
三. 假造滚动示例代码难点解析

1. 可视化容器为什么要包裹两个盒子，并且设置绝对定位？
第一个盒子（类名为"infinite-list-phantom"）的作用：
其总高度为内容的总高度，重要要为了撑起父盒子，使父盒子有滚动条。
第二个盒子（类名为‘infinite-list’）的作用：
这个要可视区域，是用户所能看到的界面，也是数据渲染的界面。
至于为什么要设置绝对定位，是由于需要第二个盒子覆盖第一个盒子，以满意第二个盒子显如今可视界面。
2. 为什么要设置:style=“{ transform: getTransform }”？
原因如下：

• 由于可视界面区域有限，在滚动后，会展示总的内容区域和可视区域不相交的部分，在可视区域就会出现部分或全部空缺。
  
• 滚动的过程本质要内容区域的位置厘革，其厘革的数值可以通过scrollTop来查看;
  
• 通过transform的作用，抵消scrollTop的位置变动，使得我们看到的还是原先的可视区域位置的dom节点，只不外在滚动的过程中，渲染数据会改变。
  

3.为什么要设置偏移距离？
相关代码如下：

1. //此时的偏移距离
2. this.startOffset = scrollTop - (scrollTop % this.itemSize);

复制代码

原因如下：

• 为了使得滚动的时间有动态效果，体验会更好;
  
• 可以实行将scrollTop - 改成 scrollTop + 测试，就可以更好的去理解2、3点疑问。
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。