当前位置:网站首页>Long list optimized virtual scrolling
Long list optimized virtual scrolling
2022-07-05 14:36:00 【Forgive me for not being free and easy enough】
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul.container {
position: relative;
width: 500px;
max-height: 500px;
/* Limit the size of the container display area */
margin: 0;
padding: 0;
border: 1px solid #000;
overflow-y: auto;
list-style-type: none;
}
ul.container li {
position: absolute;
width: 100%;
height: 50px;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<ul class="container"></ul>
<script>
const dataList = Array.from({
length: 1000 }).map((item, index) => index); // Generate 1000 pieces of data
const $list = document.querySelector(".container")
const size = 20 // Visual area 10 strip , But you need to scroll Take the number of pieces each time 20
createItem(0) // The default from the 0 Start (i)
$list.setAttribute("style", `height: ${
50 * dataList.length}px;`); // Set container height
function handleScroll(e) {
// Calculations should show those
const i = Math.floor(e.target.scrollTop / 50);
createItem(i);
}
function createItem(i) {
$list.innerHTML = dataList.slice(i, i + size).map(
item =>
`<li style="top: ${
item * 50}px; background: ${
createHexColor()};">${
item}</li>`)
.join("");
}
$list.onscroll = throttle(handleScroll, 20);
function throttle(fn, delay) {
// Events triggered by scrolling
let lastTime = 0;
return function () {
const nowTime = +new Date();
if (nowTime - lastTime > delay) {
fn.apply(this, arguments);
lastTime = nowTime;
}
}
}
function createHexColor() {
const colorStr = "6789abcdef",
len = colorStr.length;
let colorVal = "#";
for (let i = 0; i < 6; i++) {
colorVal += colorStr[Math.floor(Math.random() * len)];
}
return colorVal
}
</script>
</body>
</html>
边栏推荐
- Postgresql 13 安装
- PostgreSQL 13 installation
- Longest common subsequence dynamic programming
- 区间 - 左闭右开
- ASP.NET大型外卖订餐系统源码 (PC版+手机版+商户版)
- 【leetcode周赛总结】LeetCode第 81 场双周赛(6.25)
- 【C 题集】of Ⅷ
- 黑马程序员-软件测试-10阶段2-linux和数据库-44-57为什么学习数据库,数据库分类关系型数据库的说明Navicat操作数据的说明,Navicat操作数据库连接说明,Navicat的基本使用,
- 【華為機試真題詳解】歡樂的周末
- 【招聘岗位】基础设施软件开发人员
猜你喜欢
随机推荐
世界环境日 | 周大福用心服务推动减碳环保
mysql8.0JSON_CONTAINS的使用说明
Fonctions communes de thymeleaf
useMemo,memo,useRef等相关hooks详解
03_ Dataimport of Solr
非技术部门,如何参与 DevOps?
【leetcode周赛总结】LeetCode第 81 场双周赛(6.25)
Redis如何实现多可用区?
The speed monitoring chip based on Bernoulli principle can be used for natural gas pipeline leakage detection
PMP考试20天能通过吗?
网上电子元器件采购商城:打破采购环节信息不对称难题,赋能企业高效协同管理
CPU设计实战-第四章实践任务三用前递技术解决相关引发的冲突
[detailed explanation of Huawei machine test] character statistics and rearrangement
申请代码签名证书时如何选择合适的证书品牌?
LeetCode_ 67 (binary sum)
Lepton 无损压缩原理及性能分析
直播预告|如何借助自动化工具落地DevOps(文末福利)
The forked VM terminated without saying properly goodbye
通过npm 或者 yarn安装依赖时 报错 出现乱码解决方式
Thymeleaf 模板的创建与使用