react将选中文本自动滑动到容器可视区域内

    // 自动滚动到可视区域内useEffect(() => {const target = ref;const wrapper = wrapperRef?.current;if (target && wrapperRef) {const rect = target.getBoundingClientRect();const wrapperRect = wrapper.getBoundingClientRect();const isVisible = rect.bottom <= wrapperRect.bottom && rect.top >= wrapperRect.top;if (!isVisible) {wrapper.scrollTo({ top: rect.top, behavior: 'smooth' });}console.log('isVisible', isVisible);}}, [avaliableIndex]);
 <div className={ve.defaultWrapper} ref={wrapperRef}>{content.map((text, index) => (<pref={(r) => {if (isSelectedRow(index)) {ref = r;}}}></p>)}</div>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/674996.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NLP入门系列—词嵌入 Word embedding

NLP入门系列—词嵌入 Word embedding 2013年&#xff0c;Word2Vec横空出世&#xff0c;自然语言处理领域各项任务效果均得到极大提升。自从Word2Vec这个神奇的算法出世以后&#xff0c;导致了一波嵌入&#xff08;Embedding&#xff09;热&#xff0c;基于句子、文档表达的wor…

幻兽帕鲁服务器全自动部署教程,小白也能轻松上手

幻兽帕鲁太火了&#xff0c;官方palworld服务器不稳定&#xff1f;不如自建服务器&#xff0c;基于腾讯云幻兽帕鲁服务器成本32元全自动部署幻兽帕鲁服务器&#xff0c;超简单有手就行&#xff0c;全程自动化一键部署10秒钟即可搞定&#xff0c;无需玩家手动部署幻兽帕鲁游戏程…

深入探索:缓冲区溢出漏洞及其防范策略

在网络安全的广阔领域中&#xff0c;缓冲区溢出漏洞一直是一个重要的议题。这种漏洞&#xff0c;如果被恶意利用&#xff0c;可能会导致严重的安全问题&#xff0c;包括数据泄露、系统崩溃&#xff0c;甚至可能被攻击者利用来执行恶意代码。在本文中&#xff0c;我们将深入探讨…

【stm32】hal库学习笔记-ADC模数转换(超详细)

【stm32】hal库学习笔记-ADC模数转换&#xff08;超详细&#xff09; 本篇章介绍了ADC实现电压检测的三种方式 ADC原理及选型 ADC将连续的模拟电压信号转换为二进制的数字信号 选型参数 速度&#xff08;采样频率&#xff09; 功耗 精度 转换原理 ADC hal库驱动函数 普通…

一文读懂转融通

最近多家公司都在讲解关于转融通要求。今天我们就来详细聊聊&#xff01; 转融通是一种证券借贷机制&#xff0c;它允许机构投资者在融资融券交易中借入或借出证券。 具体来说&#xff0c;机构投资者可以向券商借入证券&#xff0c;或者将持有的证券借给券商&#xff0c;以扩大…

VScode实现文件、函数自动添加注释说明信息

常规的手动注释费时费力&#xff0c;不方便&#xff0c;拖慢开发进度&#xff0c;甚至影响开发者心情&#xff0c;因此需要实现自动注释&#xff0c;不仅能减少工作量&#xff0c;也能让编写的代码更加的规范整洁&#xff0c;易于理解。 在VScode的插件搜索栏中&#xff0c;查…

STM32学习笔记——看门狗

目录 一、看门狗概述 1、看门狗工作原理 2、独立看门狗IWDG主要性能&#xff1a; 二、看门狗相关寄存器 1、IWDG_KR (Independent Watchdog_Key Register) 关键词寄存器 2、IWDG_PR (Independent Watchdog_Prescaler Register) 预分频寄存器 3、IWDG_RLR (Independent W…

懒人精灵 之 Lua 捕获 json解析异常 ,造成的脚本停止.

Time: 2024年2月8日20:21:17 by:MemoryErHero 1 异常代码 Expected value but found T_END at character 12 异常代码 Expected value but found T_OBJ_END at character 223 处理方案 - 正确 json 示范 while true do--Expected value but found T_END at character 1--Ex…

鄂尔多斯交警推进东康快线“恶劣天气高影响路段优化工程”,全面提升科技赋能实战水平!

2023年5月29日&#xff0c;三部门联合印发《2023年省级恶劣天气高影响路段优化提升气象保障工作方案》&#xff08;以下简称《工作方案》&#xff09;&#xff0c;持续推动恶劣天气交通预警处置试点成果和优化提升工作经验在第二批试点路段上推广应用。 【安装在东康快线上的应…

面向对象的三大特征之一继承

继承 继承的特性 概念&#xff1a;可以使得子类具有父类的属性(成员变量)和方法(成员方法)&#xff0c;还可以在子类中重新定义&#xff0c;追加属性和方法。 继承的格式&#xff1a; public class 子类名 extends 父类名{} 父类&#xff1a;基类、超类 子类&#xff1a;派生…

【Unity】QFramework通用背包系统优化:TipPanel优化

前言 在学习凉鞋老师的课程《QFramework系统设计&#xff1a;通用背包系统》第五章时&#xff0c;笔者对物品提示TipPanel界面进行了一些优化。 优化内容包括&#xff1a; 解决闪烁问题跟随鼠标移动自适应界面大小生成位置优化 效果还是蛮丝滑的&#xff1a; 解决闪烁问题 …

[linux]:匿名管道和命名管道(什么是管道,怎么创建管道(函数),匿名管道和命名管道的区别,代码例子)

目录 一、匿名管道 1.什么是管道&#xff1f;什么是匿名管道&#xff1f; 2.怎么创建匿名管道&#xff08;函数&#xff09; 3.匿名管道的4种情况 4.匿名管道有5种特性 5.怎么使用匿名管道&#xff1f;匿名管道有什么用&#xff1f;&#xff08;例子&#xff09; 二、命名…

MVCC多版本并发控制

MVCC mvcc是多版本并发控制。维护一个数据的多个版本&#xff0c;使读写没有冲突 隐式字段 DB_TRX_ID:最近修改事务id&#xff0c;记录插入这条记录或最后一次修改该记录的事务id DB_ROLL_PTR:回滚指针&#xff0c;指向这条记录的上一个版本&#xff0c;用于配合undo log&…

筛法思想的题目

这道题目比较经典&#xff0c;或者说这种思想比较经典。 这种筛法的思想。 我们正着想对于每一个 n 、 n − 1 、 n − 2 、 . . . 、 2 、 1 n、 n-1、n-2、...、2、1 n、n−1、n−2、...、2、1都分解一遍质因数显然是来不及的时间复杂度达到 O ( n n ) O(n \sqrt{n}) O(nn ​…

Open CASCADE学习|点和曲线的相互转化

目录 1、把曲线离散成点 1.1按数量离散 1.2按长度离散 1.3按弦高离散 2、由点合成曲线 2.1B样条插值 2.2B样条近似 1、把曲线离散成点 计算机图形学中绘制曲线&#xff0c;无论是绘制参数曲线还是非参数曲线&#xff0c;都需要先将参数曲线进行离散化&#xff0c;通过离…

LayUI中表格树折叠 --

1、先将插件源码进行下载&#xff0c;新建 tableTree.js 文件&#xff0c;将源码放进去 2、将 tableTree.js 文件 配置之后&#xff0c;在需要使用的页面进行引入&#xff1a; layui.define(["tableTree"],function (exports) {var tableTree layui.tableTree;// …

2024年【天津市安全员B证】模拟试题及天津市安全员B证模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员B证模拟试题是安全生产模拟考试一点通生成的&#xff0c;天津市安全员B证证模拟考试题库是根据天津市安全员B证最新版教材汇编出天津市安全员B证仿真模拟考试。2024年【天津市安全员B证】模拟试题及天津市…

Redis——缓存设计与优化

讲解Redis的缓存设计与优化&#xff0c;以及在生产环境中遇到的Redis常见问题&#xff0c;例如缓存雪崩和缓存穿透&#xff0c;还讲解了相关问题的解决方案。 1、Redis缓存的优点和缺点 1.1、缓存优点&#xff1a; 高速读写&#xff1a;Redis可以帮助解决由于数据库压力造成…

安全的接口访问策略

渗透测试 一、Token与签名 一般客户端和服务端的设计过程中&#xff0c;大部分分为有状态和无状态接口。 一般用户登录状态下&#xff0c;判断用户是否有权限或者能否请求接口&#xff0c;都是根据用户登录成功后&#xff0c;服务端授予的token进行控制的。 但并不是说有了tok…

【LeetCode】332. 重新安排行程(困难)——代码随想录算法训练营Day30

题目链接&#xff1a;332. 重新安排行程 题目描述 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&a…