虚拟滚动技术点

css 虚拟滚动

content-visibility: auto
contain-intrinsic-size

• 作用类似于虚拟列表，能极大的提升长列表、长文本页面的渲染性能
• 用 contain-intrinsic-size预估设置了content-visibility:auto元素的高宽，可以有效的避免滚动条在滚动过程中的抖动
• 图片特点：超出页面图片还是会被请求和渲染

content-visibility: hidden
在一些需要被频繁切换显示、隐藏状态的元素上，使用content-visibility: hidden，能有效的提升切换时的渲染性能

.content-hidden {
  content-visibity: hidden;
  content-visibity: auto;
  contain-intrinsic-size: 30px;
}

css content-visibility: auto 虚拟滚动，无法直接替代 LazyLoad 虚拟列表，原因：

• 设置了content-visibility: auto的元素在可视区外只是未被渲染，但是其中的静态资源仍旧会在页面初始化的时候被全部加载
• 即便存在设置了content-visibility: auto的未被渲染的元素，但并不会影响全局的搜索功能

滚动容器的宽高， tableRef

1. 最大容积，可视区可以显示几条数据

onresize事件
oneHeight: 40 一条数据的高度
containerSize: 0 可视区显示几条数据
startIndex: 0

显示多少条数据
Math.ceil(ref.offsetHeight / this.oneHeight) + 1

屏幕翻转事件
orientationchange

~~(3.6) = Match.floor(3.6)

ref.scorllTop / oneHeight

endIndex = () => {
let index = startIndex + containerSize
if(!dataSource[index]) {
index = dataSource.length - 1 // 最后一条数据
}
return index
}

showData = dataSource.slice(startIndex, endIndex)

监听用户滚动，滑动事件
根据滚动位置，动态计算当前可视区，的起始数据索引位置
startIndex: 0,
endIndex:
antd Table 组件columns列表设置有宽度，但就是不生效
设置scroll的width等于所有列宽之和
在scroll中设置x的值为所有列宽度的总和
当Table组件同时使用rowSelection和scroll属性（x轴滚动）时，scroll.x的值需要加上rowSelection的宽度！
{{x: ‘calc(100vh - 20px)’}}

https://codesandbox.io/s/festive-worker-wc5wp
https://www.npmjs.com/package/virtualizedtableforantd4
https://www.npmjs.com/package/antd-virtual-table
https://www.npmjs.com/search?q=virtual%20table%20antd
https://www.npmjs.com/package/virtual-table-ant-design

https://www.bilibili.com/video/BV1xL411A7yA

div高度自适应

table tr高度如何自适应
div多列等高处理,实现多个div等高
页面有多个div 的时候,多个div 的内容可能不一致,导致多个div高度不同
https://www.csdn.net/tags/MtTaEg4sNDg5NjMyLWJsb2cO0O0O.html
https://wenku.baidu.com/view/8ceb7d44deccda38376baf1ffc4ffe473368fdbc.html
https://blog.csdn.net/a419419/article/details/80151874