js实现前端无限滚动中的虚拟列表效果(只渲染可视区域，dom元素可复用)

最新推荐文章于 2024-06-08 19:21:19 发布
最新推荐文章于 2024-06-08 19:21:19 发布
阅读量6.1k 收藏 27
点赞数 7
分类专栏： js vue 文章标签： js html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43245095/article/details/108245106
版权
vue 同时被 2 个专栏收录
27 篇文章 2 订阅
订阅专栏
js
21 篇文章 1 订阅
订阅专栏

先看效果

不加防抖节流。
在这里插入图片描述
加防抖节流
在这里插入图片描述

提示

加防抖节流 可以节省性能，但滑动过快会出现闪烁现象。请根据需求自行调整触发时间。原理通过代码可看出！

限制:该代码处理方式由于html 元素高度存在最大值，且不同浏览器以及不同浏览器版本支持的html 元素高度最大值不一样，当数据列表理论生成的高度大于html元素高度最大值时，生成的滚动区域只有html元素高度最大值那部分，剩下部分无法显示出来。

代码

不加防抖节流
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>无限滚动中的虚拟列表(只渲染可视区域，dom元素可复用)</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="format-detection" content="telephone=no, email=no">
</head>

<body>
    <header>
        <!-- <h1>无限滚动中的虚拟列表-防抖和节流(只渲染可视区域，dom元素可复用)</h1> -->
        <h1>无限滚动中的虚拟列表(只渲染可视区域，dom元素可复用)</h1>
    </header>
    </article>
    <article class="d-part d-effect">
        <style>
            .container {
                height: 600px;
                overflow: auto;
            }

            .item {
                min-height: 60px;
                border-bottom: 1px solid #cccccc;
                border-top: 1px solid #cccccc;
                width: 100%;
                text-align: center;
                background-color: darkgray;
                /* padding: 30px 0;
                box-sizing: border-box; */
            }
        </style>
        <div class="container">
            <div class="content">
                <div class="viewArea">
                    <div class="item">0</div>
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                    <div class="item">7</div>
                    <div class="item">8</div>
                    <div class="item">9</div>
                </div>

            </div>
        </div>
        <script>
            var item = document.querySelector('.viewArea .item');  //需要渲染的单个列表元素
            var container = document.querySelector('.container');  //可视区域元素

            console.log(item);
            var start = 0; // 开始位置
            var pageSize = 10; // 每页展示的数据
            var total = 100000; //数据总长度

            // var itemHeight = 61; // 每个item的高度
            var itemStyle = getComputedStyle(item); // 获取元素最终样式
            var itemHeight = Number(itemStyle.height.split('px')[0]) + Number(itemStyle.borderTopWidth.split('px')[0]) + Number(itemStyle.borderBottomWidth.split('px')[0]); // 每个item的高度
            console.log('itemHeight', itemHeight);


            // 设置数据列表的总高度
            document.querySelector('.container .content').style.height = itemHeight * total + 'px';
            updateDom(start, pageSize, itemHeight, 0);
            
            //更新渲染列表函数
            function updateDom(start, pageSize, itemHeight, height) {
                document.querySelector('.container .content .viewArea').style.transform = 'translateY(' + height + 'px)';
                let all = document.querySelectorAll(' .viewArea .item'); // 获取所有渲染列表
                for (var i = start, itemIndex = 0, len = start + pageSize; i < len; i++, itemIndex++) {
                    var index = i % pageSize; // 计算出数据列表的下标
                    all[itemIndex].innerHTML = i;
                }
            }
            // 滚动处理函数
            function handleScroller() {
                var lastStart = 0; // 上次开始的位置
                return () => {
                    var currentScrollTop = container.scrollTop;
                    var fixedScrollTop = currentScrollTop - currentScrollTop % itemHeight; 
                    var start = Math.floor(currentScrollTop / itemHeight);

                    if (lastStart !== start) {
                        lastStart = start;
                        updateDom(start, pageSize, itemHeight, fixedScrollTop);
                    }
                }
            }
            // // 防抖和节流
            // function throttle(fn, delay, atleast) {
            //     let timer = null;
            //     let rAFtimer = null;
            //     let previous = 0;

            //     return function () {
            //         let now = Date.now();
            //         if (now - previous > atleast) {
            //             console.log('now - previous > atleast');
            //             fn();
            //             previous = now;
            //         } else {
            //             if (delay > 20) {
            //                 console.log('delay > 20');
            //                 clearTimeout(timer);
            //                 timer = setTimeout(function () {
            //                     fn();
            //                     previous = 0;
            //                 }, delay);
            //             } else {
            //                 console.log('delay < 20');
            //                 cancelAnimationFrame(rAFtimer);
            //                 rAFtimer = requestAnimationFrame(function () {
            //                     requestIdleCallback(fn);
            //                 });
            //             }
            //         }
            //     }
            // }
            // document.querySelector('.container').addEventListener('scroll', throttle(handleScroller(), 16, 500), false);
            document.querySelector('.container').addEventListener('scroll', handleScroller(), false);
        </script>
    </article>
    </div>
</body>

</html>
加防抖节流
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>无限滚动中的虚拟列表(只渲染可视区域，dom元素可复用)</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta name="format-detection" content="telephone=no, email=no">
</head>

<body>
    <header>
        <h1>无限滚动中的虚拟列表-防抖和节流(只渲染可视区域，dom元素可复用)</h1>
        <!-- <h1>无限滚动中的虚拟列表(只渲染可视区域，dom元素可复用)</h1> -->
    </header>
    </article>
    <article class="d-part d-effect">
        <style>
            .container {
                height: 600px;
                overflow: auto;
            }

            .item {
                min-height: 60px;
                border-bottom: 1px solid #cccccc;
                border-top: 1px solid #cccccc;
                width: 100%;
                text-align: center;
                background-color: darkgray;
                /* padding: 30px 0;
                box-sizing: border-box; */
            }
        </style>
        <div class="container">
            <div class="content">
                <div class="viewArea">
                    <div class="item">0</div>
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                    <div class="item">6</div>
                    <div class="item">7</div>
                    <div class="item">8</div>
                    <div class="item">9</div>
                </div>

            </div>
        </div>
        <script>
            var item = document.querySelector('.viewArea .item');
            var container = document.querySelector('.container');

            console.log(item);
            var start = 0; // 开始位置
            var pageSize = 10; // 每页展示的数据
            var total = 100000; //数据总长度

            // var itemHeight = 61; // 每个item的高度
            var itemStyle = getComputedStyle(item);
            var itemHeight = Number(itemStyle.height.split('px')[0]) + Number(itemStyle.borderTopWidth.split('px')[0]) + Number(itemStyle.borderBottomWidth.split('px')[0]); // 每个item的高度
            console.log('itemHeight', itemHeight);


            // 设置数据列表的总高度
            document.querySelector('.container .content').style.height = itemHeight * total + 'px';
            updateDom(start, pageSize, itemHeight, 0);
            function updateDom(start, pageSize, itemHeight, height) {
                document.querySelector('.container .content .viewArea').style.transform = 'translateY(' + height + 'px)';
                let all = document.querySelectorAll(' .viewArea .item');
                for (var i = start, itemIndex = 0, len = start + pageSize; i < len; i++, itemIndex++) {
                    var index = i % pageSize;
                    all[itemIndex].innerHTML = i;
                }
            }
            // 滚动处理函数
            function handleScroller() {
                var lastStart = 0; // 上次开始的位置
                return () => {
                    var currentScrollTop = container.scrollTop;
                    var fixedScrollTop = currentScrollTop - currentScrollTop % itemHeight;
                    var start = Math.floor(currentScrollTop / itemHeight);

                    if (lastStart !== start) {
                        lastStart = start;
                        updateDom(start, pageSize, itemHeight, fixedScrollTop);
                    }
                }
            }
            // 防抖和节流
            function throttle(fn, delay, atleast) {
                let timer = null;
                let rAFtimer = null;
                let previous = 0;

                return function () {
                    let now = Date.now();
                    if (now - previous > atleast) {
                        console.log('now - previous > atleast');
                        fn();
                        previous = now;
                    } else {
                        if (delay > 20) {
                            console.log('delay > 20');
                            clearTimeout(timer);
                            timer = setTimeout(function () {
                                fn();
                                previous = 0;
                            }, delay);
                        } else {
                            console.log('delay < 20');
                            cancelAnimationFrame(rAFtimer);
                            rAFtimer = requestAnimationFrame(function () {
                                requestIdleCallback(fn);
                            });
                        }
                    }
                }
            }
            document.querySelector('.container').addEventListener('scroll', throttle(handleScroller(), 16, 500), false);
            // document.querySelector('.container').addEventListener('scroll', handleScroller(), false);
        </script>
    </article>
    </div>
</body>

</html>
HHH 917
关注
  • 7
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
可视化数据平台的前端实现
01-08
组件的渲染则利用Vue的`Vue.extend()`构造器结合`document.createDocumentFragment()`进行优化，先读取配置文件，然后通过构造器创建组件实例，文档片段则用于提升性能，模拟虚拟DOM。 总的来说，NTDVP的实现涉及了...
Vlist:vitural list Infinite Scrolling 虚拟列表，无限滚动，高性能列表
05-10
Vlist vitural list Infinite Scrolling 虚拟列表，...只渲染可视范围内的dom,通过复用超出可视范围的dom达到提高性能的目的 支持环境和框架 支持原生js开发以及react和vue框架 效果 使用方法 详见demo h5-demo已适配
Vue Virtual Scroller：高性能滚动解决方案
gitblog_00067的博客
03-20 493
Vue Virtual Scroller：高性能滚动解决方案 项目地址:https://gitcode.com/Akryum/vue-virtual-scroller Vue Virtual Scroller 是一个为 Vue.js 应用程序设计的高效虚拟滚动组件。它允许你在处理大量数据时，只渲染可视区域内的元素，从而显著提高应用性能，尤其是对移动设备而言。 项目简介 Vue Virtual Sc...
js 虚拟列表
283301717的博客
03-02 1626
一个简单的JS虚拟列表 效果如下： html部分： <!DOCTYPE html> <html> <head> <title>javascript 虚拟列表</title> </head> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; font
前端渲染大量数据思路【虚拟列表】【异步机制】
最新发布
weixin_64433668的博客
06-08 759
当浏览器遇到性能瓶颈导致页面卡顿时，你会怎么处理？如何查找问题的原因？浏览器本身自带性能检测工具，通常我们分析由脚本导致的页面卡顿会选择选项卡，在其中我们可以找到导致页面卡顿的函数，另外通过观察我们可以看到脚本的执行时间占比以及页面卡顿的程度。此外还有内存选项卡，可以截取当前页面的内存快照，由于我们的页面通常不像服务器那样一直运行，所以平常我们也不会过于关注页面的内存使用问题。
js 实现虚拟列表
weixin_37795155的博客
07-21 2710
js 实现虚拟列表
用JS实现虚拟列表（IT枫斗者）
Andrew_Chenwq的博客
05-17 1221
当一个列表需要渲染大量数据的时候是非常耗时的，而且在列表滚动的过程中会出现卡顿的现象。即使用上懒加载解决了列表初始化时渲染过慢的问题，但是每次拉取下一页数据的时候都会造成列表的重新渲染。随着拉取的数据越来越多，列表渲染时间长、卡顿的问题依然存在。这个时候虚拟列表就派上用场了。虚拟列表的实现原理简单来说，就是列表并不会把所有的数据都渲染出来，而是通过监听滚动事件然后实时计算当前是哪几条数据显示在页面上，然后只渲染用户可以看见的这几条数据。
前端特效列表
qq_45670012的博客
10-29 272
css3,canvas 和 webGL 学习过程中做的demo和特效，一部分是对网上的特效进行重写，以加深对知识点的理解，具体内容请看：Jeff Zhong's Demo...
基于Yolov5的Vue前端目标检测和训练可视化系统源码.zip
05-23
此外，由于标签中提到了"javascript"，我们可以推测项目中还使用了JavaScript进行DOM操作和其他前端功能的实现。Vue.js和JavaScript的结合使得这个项目能够提供动态的交互体验，例如点击某个检测结果查看详情，或者...
js数据可视化驾驶舱20套源码
04-28
这可能包括数据预处理、延迟渲染、虚拟化等技术，以确保图表加载和滚动流畅。 通过学习和研究这些源码，开发者可以提升其数据可视化能力，理解如何使用JavaScript和相关工具创建功能丰富的数据可视化驾驶舱，从而更...
虚拟列表ListContrl
12-29
虚拟列表 ListContrl 大量记录插入高效率 可以看看蛮好的
利用JS+CSS实现滚动表格数据展示
06-06
利用CSS动画制作 Html 表格数据滚动显示, 实际自己开发也不难实现。实现的方法很多，下面是本人的一种实现方案，分享给大家。
【JavaScript源代码】Vue实现跑马灯样式文字横向滚动.docx
12-29
总的来说，Vue.js 提供了一种简洁的方式来实现跑马灯效果，通过封装组件，可以将这种功能复用到项目中的多个位置，提高代码的可维护性和复用性。在实际应用中，还可以根据需求添加更多功能，如控制滚动速度、方向、...
用原生JS实现虚拟列表
m0_37937502的博客
07-07 3005
最近在开发需求的时候，有用到 Antd 的虚拟列表组件 rc-virtual-list ，粗略地看了一下源码，于是萌生了自己写一个虚拟列表的想法。
用原生JS实现虚拟列表(IT枫斗者)
Andrew_Chenwq的博客
05-22 758
不过在第一次渲染之前，因为元素没有渲染出来，我们拿不到元素的真实高度。startIndex 的算法是在遍历列表元素的过程中，逐步累加当前元素的高度得到 contentHeight ，当第一次出现 contentHeight 大于容器顶部卷起来的长度的时候，说明当前元素是列表可视区域的第一个元素，记为 startIndex。endIndex 的算法是当第一次出现 contentHeight 大于 容器顶部卷起来的长度 + 容器高度 的时候，说明当前元素是列表可视区域的最后一个元素，记为 endIndex。
原生JS实现虚拟列表
qiaolezi787的博客
04-28 98
当一个列表需要渲染大量数据的时候是非常耗时的，而且在列表滚动的过程中会出现卡顿的现象。即使用上懒加载解决了列表初始化时渲染过慢的问题，但是每次拉取下一页数据的时候都会造成列表的重新渲染。随着拉取的数据越来越多，列表渲染时间长、卡顿的问题依然存在。这个时候虚拟列表就派上用场了。虚拟列表的实现原理简单来说，就是列表并不会把所有的数据都渲染出来，而是通过监听滚动事件然后实时计算当前是哪几条数据显示在页面上，然后只渲染用户可以看见的这几条数据。
unity编辑器学习（二） 关于优化编辑器的scrollview（只渲染可见范围内的item）
雏鹰起灰
03-06 1564
首先明确下这篇文章实现的具体需求：在编辑器窗口的滑动列表里，如果你需要显示100个item那scrollview就会渲染出100个item，但是实际可见范围的item可能只有10个，我所需要实现的就是只渲染可见的item数据，减少不必要的性能消耗。 具体实现效果如下： StartNum是视野范围内列表的起始序列号，EndNum是视野范围内列表的结束序列号，ScrollPositionY是滑块位置，MaxHeight是算出的滑块能到达的最大值。 接下来是实现的思...
js可视区域加载
DreamFJ的博客
08-09 1847
       当元素处于可视区域时再加载，例如淘宝天猫上打开网页时不是所有图片都加载出来了，而是当滚动条滚动到那个区域时才加载出来图片。   方法：判断元素顶部到浏览器窗口顶部的距离是否小于可视区域高度，如果小于就显示。这里可以用一个方法： getBoundingClientRect()，该方法返回一个对象，该对象存储了元素四个边界到浏览器窗口上边和左边的距离。 getBoundingCli...
【js】无限虚拟列表的原理及实现
weixin_52418790的博客
02-22 1797
虚拟列表是长列表按需显示思路的一种实现，即虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。简而言之，虚拟列表指的就是「可视区域渲染」的列表。定义固定宽高的元素，该区域限制无限虚拟列表的可视区域大小宽高为父元素的100%，纵向超出可滚动宽度100%，高度auto，用于呈放渲染的部分列表项，撑开可滚动区域。
D3.js实战：数据可视化与JavaScript第二版
它允许开发者将数据绑定到DOM（文档对象模型）并应用数据驱动的转换到视觉元素上，从而实现复杂的数据可视化。在第二版《D3.js in Action》中，作者Elijah Meeks深入讲解了如何利用D3的最新版本v4和ES6（ECMAScript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值