- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端技术江湖
虚拟滚动的 3 种实现方式！
元素固定高度的虚拟列表 元素不定高度的虚拟列表 元素动态高度的虚拟列表 虚拟列表核心原理 我们先来看一下整个虚拟列表元素的表现。 当我们滚动到一个元素离开可视区范围内时，就去掉上缓冲区顶上的一个元素，然后再下缓冲区增加一个元素。这就是虚拟列表的核心原理了。 （3）采用绝对定位，计算上缓冲区到下缓冲区之间的每一个元素在contianer中的top值，只有知道top值才能让元素出现在可视区内。 我们可以采用这种解决方案，那就是每次只需要计算上缓冲区到下缓冲区之间的元素，并记录他们，并且记录下最底下的那个元素的索引，当用户进行滚动时，如果我们是向上滚动，就可以直接从已经计算好的记录里取，如果向下滚动 结果 结果还是挺满意的了，这里提一下上文提到的小bug，那就是在向下拉动滚动条时，鼠标和滚动条时脱节的。
3.1K10编辑于 2023-09-11 - 来自专栏原创分享
react虚拟滚动的实现
(i++)) } return arr } const data = getData() const itemHeight = 21 const itemLength = 10 // 是否开启虚拟滚动
1.9K30发布于 2019-12-23 - 来自专栏Czy‘s Blog
基于React的虚拟滚动方案
而此时我们通常就需要虚拟滚动来实现性能优化，当我们拥有大量数据需要在用户界面中以列表或表格的形式展示时，这种性能优化方式可以大幅改善用户体验和应用性能，那么在本文中就以固定高度和非固定高度两种场景展开虚拟滚动的实现 描述 实现虚拟滚动通常并不是非常复杂的事情，但是我们需要考虑到很多细节问题。在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 固定高度 实际上关于虚拟滚动的方案在社区有很多参考，特别是固定高度的虚拟滚动实际上可以做成非常通用的解决方案。那么在这里我们以ArcoDesign的List组件为例来研究一下通用的虚拟滚动实现。 我们首先就需要渲染10k个占位符，实际上这也是一件合理的事，除非我们最开始就注意到列表的性能问题，而实际上大部分都是后期优化页面性能，特别是在复杂的场景下例如文档中，所以假设原本有1w条数据，每条数据即使仅渲染3个节点 那么动态高度的虚拟滚动与最开始我们实现的固定高度的虚拟滚动区别在哪，首先是滚动容器的高度，我们在最开始不能够知道滚动容器实际有多高，而是在不断渲染的过程中才能知道实际高度；其次我们不能直接根据滚动的高度计算出当前需要渲染的节点
70210编辑于 2025-05-22 - 来自专栏一Li小麦
虚拟滚动之原理及其封装
虚拟滚动之原理及其封装 这仍然是笔者正在进行中某个前端基础项目的一项基础研究。 可视区渲染有个更出名的名字，叫做虚拟滚动——指的是只渲染可视区域的列表项，非可见区域的完全不渲染，在滚动条滚动时动态更新列表项。 相比较于懒渲染，虚拟滚动要求一次性全部拿到数据，但是滚动条能够完全正确地反映当前页面在全部数据的位置。滚动无非是对几十个dom进行操作，可以达到极高的后续渲染性能。 3. 理想 最低目标当然是满足需求。 实现 实现虚拟滚动就是处理滚动条滚动后的可见区域的变更，其中具体步骤如下： 1.计算当前可见区域起始数据的 startIndex2.计算当前可见区域结束数据的 endIndex3.计算当前可见区域的数据
10.4K20发布于 2020-07-10 - 来自专栏与前端沾边
mini react-window(一) 实现固定高度虚拟滚动
，可视区域有限，看到的数据有限，在用户滚动时，指渲染可是区域内的内容即可，dom 少，渲染少在 github 上也有很多针对 react 的虚拟滚动的库，我们这里对 react-window 的使用和实现 ，进行一下简单的学习分享，了解不同虚拟滚动场景下的使用方式和 react 的优秀封装，希望对你有帮助。 实现固定渲染虚拟滚动创建自己实现组件的目录// src/react-window/index.jsexport {default as FixedSizeList} from '. createLstComponent({})export default FixedSizeList实现 FixedSizeList 组件时我们要注意我们没有直接写， react-window 提供了固定高度非固定高的等几种虚拟滚动场景 图片本小节我们实现了固定高度虚拟列表，代码不是很多，感兴趣的小伙伴可以自己动手实现自己的虚拟滚动库，下一小节我们继续实现其他场景下的滚动列表，如有问题欢迎留言讨论。
2.7K51编辑于 2022-09-25 - 来自专栏前端小叙
vue3实现元素监听滚动事件
debounce } from '@/common/util.js' export default function useScroll(elRef) { console.log('########3useScroll 注意：对于滚动事件，最好要使用防抖，防抖可以保证最后一次滚动事件始终是触发的，而节流是在一段时间内执行一次，最后一次不保证会触发，除非手动修改节流方法，来最后一次保证始终触发。
3.2K20编辑于 2023-06-10 - Vue.createApp({ components: { 'vue3SeamlessScroll': Vue3SeamlessScroll.Vue3SeamlessScroll来自专栏编程社区
vue3-seamless-scroll实现无缝滚动
/node_modules/vue3-seamless-scroll/dist/vue3-seamless-scroll.js"></script>
</vue3- seamless-scroll>默认配置<vue3-seamless-scroll v-if="list2.length>0" :list="list2" hover v-model="scroll {{ item.id }} {{ item.province }}3.8K31编辑于 2022-02-16
translate3d模拟滚动条
做移动端页面，通常是不用原生的scroll,而是用translate3d来模拟，原因主要是原生的scroll对移动端的支持并不是很好，样式也不好看（有滚动条出现），用translate3d来模拟还可以调用 height: 500px; overflow: hidden; } #listContentUl { position:absolute; top:0; left:0; transform:translate3d iTop >= 0){ if(onoff1){ onoff1 = false; downY = touch.pageY; } $(This).css('transform','translate3d ; downY = touch.pageY; } $(This).css('transform','translate3d(0,'+((touch.pageY - downY)/3 + (parentH - childH))+'px,0)'); } else{ $(This).css('transform','translate3d(0,'+(touch.pageY - downY + downT)+
3种方法实现CSS隐藏滚动条并可以滚动内容
方法1：计算滚动条宽度并隐藏起来 在本站的侧栏，你可以看到前端日报的那块内容并没有滚动条，但鼠标移上去却可以滚动内容。这是什么技术呢？ 其实我只是把滚动条通过定位把它隐藏了起来。 这样子就看不到滚动条同时也可以滚动。 overflow-x: hidden; overflow-y: scroll; } .inner-container::-webkit-scrollbar { display: none; } 演示 方法3： css隐藏滚动条 同时该文章还分享了一种通过CSS隐藏滚动条的方法，不过这个方法不兼容IE，做移动端的可以使用。 那就是自定义滚动条的伪对象选择器::-webkit-scrollbar，详情请看之前的文章：CSS3自定义webkit滚动条样式 chrome 和Safari .element::-webkit-scrollbar
Android开发(3) 可滚动的录入表单演示
本文使用的控件有： RelativeLayout 相对布局 ScrollView 滚动视图 TableLayout 表格布局 ? 3.分别设定上面三个控件的布局属性（或者说设置布局，对齐样式）。 ，可以看到 顶部控件使用一个RelativeLayout 名字是：toppanel 底部控件使用一个RelativeLayout 名字是：panelBottom 中间控件使用一个ScrollView，滚动视图控件 该控件的好处是当它的子控件太长时，会自动出现滚动条。 下面我们为ScrollView下添加一个TableLayout，这个一个表格布局控件，使得布局非常整齐。 <TableLayout android:padding="<em>3</em>dip" android:id="@+id/tableLayout1" android:
Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践
使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。 这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。 比方说，假设视口中只能显示10个元素，那么虚拟滚动技术只会渲染这10个元素，即使总数据量有上万个。动态更新视口内容：当用户进行滚动操作 时，使用虚拟滚动技术可以动态更新可视区域内的内容。 在 GitHub 上，可以看到针对 Vue2 或者 Vue3 的使用说明。 目前 Vue3 相关的 UI 框架，大部分组件都支持了虚拟滚动，可以直接用，但 Vue2 旧项目相关的虚拟滚动相对较少，可能部分业务场景，需要自己手动实现，比方说下拉选择框、表格等。
Apache虚拟主机-3
基于ip的虚拟主机 案例：三个IP分别对应三个域名及三个目录 192.168.124.222 www.abc.com /var/www/abc 192.168.124.223 tec.abc.com
初探富文本之基于虚拟滚动的大型文档性能优化方案
初探富文本之基于虚拟滚动的大型文档性能优化方案 虚拟滚动是一种优化长列表性能的技术，其通过按需渲染列表项来提高浏览器运行效率。 虚拟滚动 在具体实现之前我思考了一个比较有意思的事情，为什么虚拟滚动能够优化性能。 那么在研究了虚拟滚动的优势之后，我们就可以开始研究虚拟滚动的实现了，在进入到富文本编辑器的块级虚拟滚动之前，我们可以先来研究一下虚拟滚动都是怎么做的。 . */} /> 通过简单分析Arco的通用列表虚拟滚动，我们可以发现实现虚拟滚动似乎并没有那么难，然而在我们的在线文档场景中，实现虚拟滚动可能并不是简单的事情。 假设原本有1w条数据，每条数据即使仅渲染3个节点，那么此时我们如果仅渲染占位节点的情况下还能将原本页面30k个节点优化到大概10k个节点。
基于vue3实现的vue3-seamless-scroll无缝滚动
项目地址 GitHub Gitee 安装vue3-seamless-scroll npm install vue-seamless-scroll --save 参数配置文档地址 GitHub与 /App.vue'; import { jsSeamlessScroll, cssSeamlessScroll } from "vue3-seamless-scroll"; const app seamless-scroll"; import "vue3-seamless-scroll/lib/vue3SeamlessScroll.css" export default defineComponent , date: Date.now(), }, { title: "Vue3.0 无缝滚动组件展示数据第3条", 0; } </style> 展示效果 JS版效果 [在这里插入图片描述] CSS3版效果 [在这里插入图片描述]
优化长列表性能：虚拟滚动在React中的实践与思考
问题分析传统渲染方式的问题在于：一次性创建大量DOM节点，占用大量内存每个节点都需要样式计算和布局渲染滚动时频繁重绘，导致界面卡顿解决方案：虚拟滚动虚拟滚动通过只渲染可视区域内的内容来解决这个问题。 基础组件结构首先创建虚拟滚动组件的基本框架：import React, { useState, useRef, useMemo } from 'react';const VirtualScroll = ，性能得到显著提升：指标传统渲染虚拟滚动提升初始加载时间1200ms150ms8倍内存占用85MB12MB7倍滚动FPS10-1555-604-6倍实践中的挑战与解决方案1. 滚动闪烁问题快速滚动时可能出现空白区域，通过预渲染额外项目解决：// 增加缓冲区项目const buffer = 3; // 上下各多渲染3个项目const startIdx = Math.max(0, ，虚拟滚动不仅解决了性能问题，还为用户提供了流畅的代码浏览体验。
svelte3.x模拟滚动条组件SvelteScrollbar
今天再来分享一个最新基于svelte.js开发的网页虚拟美化滚动条组件svelte-scrollbar。 008360截图20220506070118446.png svelte-scrollbar 一款基于svelte3.x轻量级pc端自定义虚拟滚动条组件。 支持 系统原生滚动条、自动隐藏、垂直/水平滚动、自定义滚动条颜色/尺寸/间距 等功能。 import Scrollbar from '$lib/Scrollbar' p2.gif 接入使用 通过<Scrollbar></Scrollbar>包裹住的内容，即可创建一个虚拟美化滚动条。 <! // 滚动条颜色 export let color = '' // 滚动条层叠 export let zIndex = null // 滚动条区域高度
【技巧】ionic3独享滚动区域之滑动segment
/div>
Barchart实现滚动标签跟随滚动
目前有功能比较强大的柱形图Charts，写这个demo的目的主要是产品要实现 滚动柱形图，标签要跟随滚动。所以重新写了一个简单的demo实现了功能, 具体使用看demo，很简单 ?
虚拟环境---python3
**在linux搭建虚拟环境：** 在centos中装Python3的在线安装命令： 0\. yum makecache 1. yum install -y python36 (1)virtualenv -p python3 flasky ---创建虚拟环境 (2)source flasky/bin (3)创建一个虚拟环境flasky mkvirtualenv flasky (3.1) 指定版本创建虚拟环境 -----virtualenv -p C:\\Python35\\python.exe test2 **** python -m venv py3 \*\*\*\* (4)进入虚拟环境 workon flasky (5)pip install -r requirements [](https://oscimg.oschina.net/oscnet/6ce6fb4e123de17184f3d2629b3e974d92e.jpg) (8)****** 指定虚拟环境的路径:WORKON_HOME
纯滚动怎么理解_scrollview不滚动
本文介绍元素尺寸中内容最多的一部分——滚动scroll 滚动宽高 scrollHeight scrollHeight表示元素的总高度，包括由于溢出而无法展示在网页的不可见部分 scrollWidth test.scrollWidth); //103(120-17) 103(120-17) console.log(test.clientHeight,test.clientWidth); </script> 【3】 元素未滚动时，scrollLeft的值为0，如果元素被水平滚动了，scrollLeft的值大于0，且表示元素左侧不可见内容的像素宽度 当滚动条滚动到内容底部时，符合以下等式 scrollHeight 如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。 scroll的知识，基本上囊括了关于滚动现有的所有属性和方法。
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号