react滚动到指定位置_react 中 scrollTo 引发的思考

2023-11-14

如何在 React 中实现 scrollTo 效果

之前考虑过用scrollInToView,但是由于这个 API 实现的场景不能控制元素在屏幕上的显示位置遂选择其他出路。

scrollTo 当只有一个元素需要直接滚动时 可以在 useEffect 直接调用 该方法即可。

当遇到需要控制一个有序数组的时候该如何操作。需求如下

  1. 可以点击按钮进行依次循环滚动。
  2. 需要控制住滚动时距离顶部的高度。
  3. 需要滚动的数组变化时,需要在滚动列表中添加或删除一条记录。

例如,在git MR 的详情页上有几个未解决的评论。在tab 页上需要一个快捷的点击按钮进行快速定位到需要解决的评论上去。

然而会遇到几个场景。

场景一:当页面上只需要定位到具体的某几条评论,不涉及评论解决后,跳转发生变化。这种是最简单的场景。我们实现的方案也会比较的简单。

即判定评论列表是否显示后,展示在 tab上一个跳转 btn 。然后把 未解决的评论通过一个字段筛选出来传入到一个记录的state 中. 其中通过 hook的 useEffect 计算出。一个未解决评论的位置数组。其中这个位置数组只根据 第一次 传入的 unResolved 计算一次。

这个时候你们可能会问怎么保证这个位置数组只计算一次。

// 设置一个 是否可以计算 dom 的标志位  
const [canCountDom, setCanCo
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

react滚动到指定位置_react 中 scrollTo 引发的思考 的相关文章

  • 网络:网络协议基本原理

    引入 进程间通信 其实是通过内核的数据结构完成的 主要用于在一台linux上两个进程之间的通信 但是 一旦超出一台机器的范畴 我们就需要一种跨进程的通信机制 一台机器将自己想要表达的内容 按照某种约定好的格式发送出去 当另一条机器收到这些信
  • 八家校招公司的面试问题总结

    八家校招公司的面试问题总结 阿里 1 String s abc s存储在哪个区域 2 HashMap实现原理 ConcurrentHashMap实现原理 3 红黑树 为什么允许局部不平衡 4 TCP UDP区别 为什么可靠和不可靠 5 一次
  • Linux之Samba服务配置与管理

    Linux之Samba服务配置与管理 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件 由服务器及客户端程序构成 SMB Server Messages Block 信息服务块 是一种在局域网上共享文件和打印机的一种通信
  • Jetpack Compose — 让Composable具备生命周期感知

    Jetpack Compose 让Composable具备生命周期感知 我们将研究不同的方法来实现可组合 Composable 的生命周期感知 我们还将了解可组合生命周期和视图 View 生命周期之间的区别 我们将逐步探索不同的解决方案 以
  • 开源中国-仿写代码

    开源中国源码 div class page div
  • 微信小程序获取用户唯一标识openid

    相关知识 微信小程序 spring boot 一 步骤 1 获得的用户登录凭证code 有效期五分钟 2 发送参数code至后端 3 通过code获取openid 二 实现 1 获取code 接口 wx login 接口地址 https d
  • 工作中碰到的git问题

    这是平时工作中遇到的问题 百度结果很多 觉得有用的在此作个记录 一 git解决代码冲突 拉取时冲突 1 将本地的修改提交到本地库 2 执行命令 1 git pull origin master 将远程库代码拉取并合并到本地库 2 git p
  • 结构体字节对齐问题

    文章目录 一 结构体必知知识 二 结构体字节对齐有什么用 三 如何进行内存对齐 1 对齐规则 按结构体中最长类型字节为单位 2 结构体嵌套的情况 3 存在指定字节对齐单位的情况 pragma pack 总结 一 结构体必知知识 1 结构体内
  • Git 常用命令小结 -- 个人

    一 Git 放弃本地修改 强制pull代码 git fetch all git reset hard origin 分支 git pull 二 Git 基础命令 git status git diff 查看代码修改的状态和内容 git br
  • CAN初始化流程

    1 配置相关引脚的复用功能 使能CAN时钟 要用CAN 首先要使能CAN的时钟 CAN的时钟通过APB1ENR的第25位来设置 其次要设置CAN的相关引脚为复用输出 这里我们需要设置PA11位上拉输入 CAN RX引脚 PA12为复用输出
  • ubuntu14 java8_ubuntu14.04 安装Java8 (JDK8)

    目前腾讯云服务器 Ubuntu 14 04 系统用 sudo apt get install default jdk 安装的JDK还是 java 7的 会导致一些对于需要Java 8 支持的一些应用无法编译或者运行 所以 目前还需要自己手动
  • 浅谈后台管理系统

    一 后台是什么 二 模块管理 三 角色管理 四 账号管理 五 密码管理 六 更多讨论 一 后台是什么 后台不是某个独立系统 是多个模块的组合 并且之间还有信息交互 所以后台的设计对于PM要求一般较高 后台是用来数据维护的 后台需要一个管理模
  • 学了那么多年设计模式依然不会用!那可真蠢!

    什么是设计模式 设计模式 Design Pattern 代表了最佳的实践 通常被有经验的面向对象的软件开发人员所采用 设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案 这些解决方案是众多软件开发人员经过相当长的一段时间的试验和
  • 调试最长的一帧(第21天)

    看看全流程 主要讲sceneview cull 跟过去 重点在cullstage 状态树与渲染树的构建都是在pushStateSet和popStateSet函数中完成的 而CullVisitor apply函数 在遍历节点时调用 则负责根据
  • vnc远程管理kvm,在办公室连接kvm服务器

    文章目录 vnc远程管理kvm vnc远程管理kvm vnc概念图 首先试试服务器装了VNC没 rpm q tigervnc tigervnc server 没安装的话会直接出现 package tigervnc is not instal
  • getopt()与getopt_long()的使用简介

    感性认识 getopt 与getopt long 是专门处理命令行参数的两个函数 getopt 处理短参数 getopt long 处理长参数 还不明白请看下面这张图 解析 t yiqi 就是这两个函数做的事 下面我们一起来看看究竟如何使用
  • 查看电脑连接的wifi密码

    一 常规方法查看电脑连接的wifi密码 1 使用电脑连接需要查看的WiFi 鼠标右击电脑桌面右下角 WiFi图标 在弹出的菜单中点击 打开 网络和internet 设置 2 在弹出的设置窗口中点击 网络和共享中心 如下图所示 3 在弹出的网
  • MSP430F149小系统开发板实现RS232串口通信

    程序功能 MCU不停向PC机发送数据 在屏幕上显示0 127对应 的ASCII字符 通信格式 N 8 1 2400 测试说明 打开串口调试精灵 正确设置通信格式 观察屏幕 调试说明 该程序通过USB口 在sscom32上可以观察到现象 用的
  • 2022年十月份电赛OpenMV巡线方案详细代码分析(1)

    前言 1 马上要进行电赛了 机器识别是铁定会使用到的 为了防止出现去年十月份那种特殊的巡线方案 我在此分享出OpenMV巡线方案 并且进行讲解和分析如何更改 2 学习本文之前 需要学习 OpenMV串口通讯详解 OpenMV图像处理之后给单

随机推荐

  • Java的多重循环

    多重循环 1 打印图案 经过打印分析 外层循环控制行数 内层循环控制列数 打印三角形 第一行元素的个数决定了计数器的初始值 如果元素是越来越多 那么计数器变化为 当计数器为 我们必须设置一个上限 也就是判断条件必须小于或者小于等于某个值 如
  • 5款优秀的开源 CSS3 动画库,助你轻松地实现各种动画效果,让网页不再单调

    CSS 动画主要通过Transition 过渡 和Animation 关键帧动画 实现 是一种非常实用和流行的网页设计技术 可以帮助用户实现丰富多彩的动画效果 提升用户体验和页面互动性 CSS 动画具有简单 轻量 易用等特点 可以在不依赖
  • 【网络原理】UDP和TCP协议重点知识汇总

    目录 1 UDP协议 2 TCP协议 1 UDP协议 UDP协议的特点 无连接 不可靠传输 面向数据报和全双工 UDP报文最大长度是2个字节 2个字节表示的范围就是0 65535 也就是64kb 所以如果需要使用UDP传输一个比较大的数据
  • html+css实现3D相册

  • VSCode执行Python程序出错:vscode conda activate激活失败

    VSCode执行Python程序出错 vscode conda activate激活失败 1 vscode conda activate激活失败 C Users 17316 gt conda activate CommandNotFound
  • Android 11 添加系统服务SystemService

    添加自定义的systemservice 到时候就可以直接getSystemService这样使用了 1 添加AIDL 在frameworks base core java android os 下新建一个aidl文件 package and
  • 我整理了十套 SpringBoot 项目完整教程「源码+视频+讲义」

    1 基于Springboot Vue的音乐项目 源码 详细视频 视频原创 系统的演示 系统的视频非常详细 都是我们自己录制的 也都免费分享 2 基于SSM的商城系统 源码 详细视频 系统的教程如下所示 免费分享 系统的界面如下所示 3 基于
  • AI夏令营(第三期)NLP 任务二

    在阿里云的机器学习平台PAI上跑的 机器学习PAI 机器学习建模训练部署 智能推荐 人工智能 阿里云 aliyun com 获取预训练模型时出现问题 error 104 Connection reset by peer 所以修改部分代码 前
  • jsp+ssm计算机毕业设计教务系统【附源码】

    项目运行 环境配置 Jdk1 8 Tomcat7 0 Mysql HBuilderX Webstorm也行 Eclispe IntelliJ IDEA Eclispe MyEclispe Sts都支持 项目技术 JSP SSM mybati
  • 【工作笔记】从零开始学ExtJs6(三)—— 首页搭建

    首页搭建就是需要3层 上面板 项目名称和工具栏等 做面板 树形菜单 中间面板 变换的内容 分成三层的代码 很简单 关键代码如下 extend Ext container Viewport layout border defaults col
  • 常见数据库面试题整理

    本文主要转载自 http www cnblogs com remember forget p 6140112 html 一 什么是存储过程 有哪些优缺点 存储过程是一些预编译的SQL语句 更加直白的理解 存储过程可以说是一个记录集 它是由一
  • av_frame_free释放全部和av_frame_unref释放数据

    AVFrame结构 av frame alloc申请内存 av frame free释放内存 容易混淆的是av frame unref 它的作用是释放音视频数据资源 而av frame free是释放所有资源 包括音视频数据资源和结构体本身
  • VMware安装Android x86_64 8.1 虚拟机

    Vmware 安装 Android 虚拟机 原文摘录于 https www bbsmax com A kvJ3eg7Adg https blog csdn net Iamzhouyd article details 122796439 ht
  • 启动容器启动gpu报错

    sudo docker run itd name joint train p 9090 22 shm size 32G gpus all env DISPLAY v tmp X11 unix tmp X11 unix 10e7a6213e2
  • buck同步整流sw点负压问题

    buck同步整流sw点负压问题 1 前言 2 产生原因 3 影响 4 解决方法 5 buck同步整流逆流问题 5 1 产生原因 5 2 影响 5 3 解决方案 1 前言 有人突然问我一个专业问题 我以为我知道 结果并没有 尴尬 不过我也挺喜
  • Mybatis开发环境搭建

    Mybatis开发环境搭建 一 创建web工程并导入jar包 1 创建一个web工程 2 创建classes与lib文件夹 设置编译输出路径与测试路径 设置依赖的jar包目录 3 导入jar包 并设置add as library 二 编写M
  • mysql教程 新建连接_七、MySQL 创建连接

    连接到 MySQL 服务器由三种办法 使用 mysql 命名 使用 Navicat MySQL 客户端和使用各种开发语言连接 使用 mysql 命令连接 mysql 命令一般会随着 MySQL 安装而自带 这是最基本的也是最容易连接到 My
  • 好简单的RabbitMQ安装(Windows)

    目录 Windows下安装RabbitMQ需要以下几个步骤 1 安装erlang语言环境 下载erlang 设定环境变量 验证安装环境结果 2 下载并安装RabbitMQ 下载 安装主文件 安装RabbitMQ Plugins插件 登入管理
  • 代码审计方法与步骤

    代码审计方法与步骤 一 审计前的准备 1 获得源码 大多数PHP程序都是开源的 找到官网下载最新的源码包 2 安装网站 在本地搭建网站 一边审计一边调试 实时跟踪各种动态变化 二 把握大局 1 网站结构 浏览源码文件夹 了解该程序的大致目录
  • react滚动到指定位置_react 中 scrollTo 引发的思考

    如何在 React 中实现 scrollTo 效果 之前考虑过用scrollInToView 但是由于这个 API 实现的场景不能控制元素在屏幕上的显示位置遂选择其他出路 scrollTo 当只有一个元素需要直接滚动时 可以在 useEff