ahooks useVirtualList 滚动条抖动或者数据抖动

最新推荐文章于 2023-09-15 10:52:11 发布
最新推荐文章于 2023-09-15 10:52:11 发布
阅读量998 收藏
点赞数 1
分类专栏： react CSS bug记录 文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36904182/article/details/126303457
版权
CSS 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
react
8 篇文章 0 订阅
订阅专栏
bug记录
8 篇文章 0 订阅
订阅专栏

原因

页面内容高度发生变化引起滚动条跳动的问题。浏览器会自动触发onscroll事件，调整滚动条的位置，让滚动条不乱跳动 ;
懒加载的时候由于不断更新列表项内部的高度，因此就会使浏览器自动触发滚动事件，而滚动事件又触发懒加载的更新，形成死循环，造成自动滚动的问题。

解决

在父元素中添加样式overflow-anchor:none就正常了。不知道为啥只有react18，root.render()方式才会有问题

github issues

落落的前端学习之路
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react 下拉滚动功能
qq_34036636的博客
01-16 1251
constructor(props) { super(props); this.state = { data: [], loading: false, hasMore: true, height:2000 } } onScrollHandle(event) { const clientHeight = event.target.documentEl
vue-use-virtual-list：在Vue 2或3中使用虚拟列表的组合挂钩
02-15
虚拟使用清单 在Vue 2或3中使用虚拟列表的组合挂钩。
vue2滚动条加载更多数据实现代码
12-28
解析： 判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条在Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。（兼容不同的浏览器）。 代码： 1.vue的实现 html: <div class=questionList-content-list> <ul>
firefox 滚动条消失引起页面抖动的问题
09-25
[code]html {height: 100%; margin-bottom: 1px; }[/code]用上面的代码即可。
uview的u-list和u-list-item组件分页加载时会出现卡顿，数据抖动问题
weixin_57065954的博客
02-06 3795
uview的u-list和u-list-item组件分页加载时会出现卡顿，数据抖动问题
小程序 uview 的 u-list 异常抖动，在有顶部navigationBarTitleText时拉不到底问题解决
cf
08-16 1247
preLoadScreen 列表前后预渲染的屏数，1 代表一个屏幕的高度，1.5 代表 1 个半屏幕高度。设置 preLoadScreen 为根据 page 的动态变换就可以了。
ahooks源码之useVirtualList虚拟列表
Nuhsuil的博客
07-25 294
可以看到主要实现就是通过监听滚动事件，计算滚动上去的高度 + margin 实现让滚动条滚动，计算出可显示的行数量加上缓冲区的数量，成为真正要渲染的列表。
前端性能优化问题：虚拟列表-列表滚动时出现不断抖动闪烁问题
qq_44776454的博客
09-15 797
虚拟列表实现过程中出现抖动bug解决
一行代码解决Taro中VirtualList虚拟列表渲染抖动的问题
清颖的博客
07-19 1739
问题背景：使用Taro 提供的组件库 VirtualList 时，数据源长度改变后，发生渲染抖动。读完本篇文章，你可以获得： 虚拟列表概念 虚拟列表的使用场景 性能优化策略-key 虚拟列表渲染抖动的问题解决 表格抖动或渲染错误的解决方向
一二八、【源码阅读篇】ahooks -- useVirtualList（虚拟列表）
梅某某
03-18 806
useVirtualList使用文档 import { useEffect, useState, useMemo, useRef, MutableRefObject } from 'react'; import useSize from '../useSize'; export interface OptionType { itemHeight: number | ((index: number) => number); // 行高度，静态高度可以直接写入像素值，动态高度可传入函数 over
拉动滚动条加载数据的jquery代码
12-03
代码如下: <...拉动滚动条加载数据</title> [removed][removed] [removed] $(function () { var i = 4;$(window).bind(“scroll”, function (event) { //滚动条到网页头部的 高度，兼容ie,ff,chr
jQuery实现模仿微博下拉滚动条加载数据效果
11-24
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果。分享给大家供大家参考，具体如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>滚动条距离底部</...
firefox下有滚动条时页面抖动问题的解决方法
09-25
在firefox中 默认页面不超过一页是没有滚动条的 加入页面中某些元素会临时改变页面高度 比如用了toolTip 之类的提示小工具 就会出现滚动条时有时无 导致页面抖动
asp.net+jquery滚动滚动条加载数据的下拉控件
10-29
由于需求需要用到一个滚动滚动条加载数据的下拉列表（假如数据1000条，下拉列表开始只显示100条，当用户下拉滚到条到最底下时，再加载下一个100条，如此循环）
jQuery实现当拉动滚动条到底部加载数据的方法分析
10-17
主要介绍了jQuery实现当拉动滚动条到底部加载数据的方法,结合实例形式分析了jQuery针对滚动事件的监听、响应及数据加载相关操作技巧,需要的朋友可以参考下
vue实现动态添加数据滚动条自动滚动到底部的示例代码
08-27
本篇文章主要介绍了vue实现动态添加数据滚动条自动滚动到底部的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现渲染数据后控制滚动条位置(推荐)
12-13
实现了消息发送，如果容器内消息过多，会出现滚动条，最新的消息位于最底部，不能及时出现在可视区域内，此时就需要在渲染列表后，将滚动条的位置定位到最底部。先来看看最终实现的效果   实现思路 渲染完数据后，...
解决layui数据表格table的横向滚动条显示问题
10-16
今天小编就为大家分享一篇解决layui数据表格table的横向滚动条显示问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
无刷新动态加载数据 滚动条加载适合评论等页面
01-21
滚屏加载更多数据,适合评论等页面 本例的数据库很简单，一看就明了 复制代码 代码如下: ”container”> <?php $query=mysql_query(“select * from content order by id desc limit 0,10”); while ($row=mysql_...
css 滚动条去抖动
最新发布
10-14
要解决 CSS 滚动条抖动问题，可以尝试给滚动条添加以下样式： ``` ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 5px; } ::-webkit-scrollbar-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值