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) => (
                <p
        
                    ref={(r) => {
                        if (isSelectedRow(index)) {
                            ref = r;
                        }
                    }}
                ></p>)}
                </div>
              

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Slider组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Slider组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Slider组件 滑动条组件&#xff0c;通常用于快速调节设置值&#xff0c;如音量调…

Camunda如何发送邮件及委托代码讲解

&#x1f496;专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据&#xff0c;完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧&#x1f618; &#x1f496;什么是委托…

MATLAB实现LSTM时间序列预测

LSTM模型可以在一定程度上学习和预测非平稳的时间序列,其具有强大的记忆和非线性建模能力,可以捕捉到时间序列中的复杂模式和趋势[4]。在这种情况下,LSTM模型可能会自动学习到时间序列的非平稳性,并在预测中进行适当的调整。其作为循环神经网络(RNN)的特殊形式,继承了循…

学习Pytorch深度学习运行AlexNet代码时关于在Pycharm中解决 “t >= 0 t < n_classes” 的断言错误方法

在学习深度学习的过程中&#xff0c;遇到了一个报错&#xff1a; 这跑的代码是AlexNet的代码实现。 运行时出现报错&#xff1a; C:\cb\pytorch_1000000000000\work\aten\src\ATen\native\cuda\Loss.cu:257: block: [0,0,0], thread: [4,0,0] Assertion t > 0 && t…

抽象springBoot报错

Failed to configure a DataSource: url attribute is not specified and no embedded datasource could be configured. 中文翻译&#xff1a;无法配置DataSource&#xff1a;未指定“url”属性&#xff0c;并且无法配置嵌入数据源。 DataSource 翻译&#xff1a;数据源 得…

数据结构入门(1)数据结构介绍

目录 前言 1. 什么是数据结构&#xff1f; 2.什么是算法&#xff1f; 3.数据结构和算法的重要性 前言 本文将开始介绍计算机里的数据结构。 数据结构是指数据对象中元素之间的关系&#xff0c;以及对这些关系的操作。数据结构可以分为线性结构和非线性结构。 线性结构是…

Python相关的基础模块

Python相关的基础模块 在编写远程控制工具之前&#xff0c;先要介绍用Python编写远程控制工具时所需要的 相关模块&#xff0c;为接下来编写工具打下基础。 1.subprocess模块 subprocess模块的主要作用是执行外部的命令和程序。当我们运行Python的时 候&#xff0c;其实也是在运…

32串口数据包

目录 一.数据包格式 &#xff08;1&#xff09;HEX数据包 &#xff08;2&#xff09;文本数据包 二.代码实现 &#xff08;1&#xff09;串口收发HEX数据包 (2)串口收发文本数据包&#xff08;该程序没有写出来&#xff0c;暂时找不到错误&#xff0c;以后再看&#xff09;…

蓝桥杯每日一练(python)B组

###来源于dotcpp的蓝桥杯真题 题目 2735: 蓝桥杯2022年第十三届决赛真题-取模&#xff08;Python组&#xff09; 给定 n, m &#xff0c;问是否存在两个不同的数 x, y 使得 1 ≤ x < y ≤ m 且 n mod x n mod y 。 输入格式&#xff1a; 输入包含多组独立的询问。 第一…

浅谈应该遵守的伦敦银交易规则

做伦敦银投资的朋友应遵守伦敦银交易规则&#xff0c;伦敦银交易规则不是指那些伦敦银交易技巧&#xff0c;而是在这个市场中要遵循的一些约定&#xff0c;下面我们就来讨论一下。 风险管理。风险管理即指投资者控制自己一笔乃至整体交易的风险&#xff0c;没有风险管理意识的投…

技术精英求职必备:Java开发工程师简历制作全指南

投简历找工作嘛&#xff0c;这事儿其实就跟相亲差不多&#xff0c;得让对方一眼就看上你。 在这场职场的‘相亲’中&#xff0c;怎样才能让你的简历脱颖而出&#xff0c;成为HR眼中的理想‘对象’呢&#xff1f;来&#xff0c;我给你支几招&#xff0c;让你的简历更吸引人。 …

前端又又出新框架,这次没有打包了

最近&#xff0c;前端开发领域又迎来了一个新框架——ofa.js。它的独特之处在于&#xff0c;不依赖于现有的 nodes/npm/webpack 前端开发工作流程。与jQuery类似&#xff0c;只需引用一个脚本&#xff0c;您就能像使用React/Vue/Angular一样轻松地开发大型应用。 极易上手 如果…

八卦图与二进制

名称二进制乾111坤000震100艮001离101坎010兑110巽011 1.卦象从下往上排&#xff0c;称为初爻、二爻、上爻&#xff0c;长线为1&#xff0c;短线为0&#xff0c;可以根据卦象记忆对应的二进制&#xff0c;二进制数也从下往上排。 2.注意&#xff1a;在使用二进制时&#xff0…

【精选】java初识多态 多态调用成员的特点

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

SQL拆分字段内容(含分隔符)

问题描述&#xff1a; 在做数据迁移的过程中&#xff0c;我们希望对表中的某个字段根据分隔符进行拆分&#xff0c;得到多条数据&#xff0c;原代码有点意思&#xff0c;因此记录一下。 我们假设某条数据如下&#xff1a; IDSTRS1公司名称不能小于四个字&#xff0c;行业类别…

Unity学习笔记之【IK反向动力学操作】

反向动力学Inverse Kinematics 反向动力学&#xff0c;简称IK。相较于正向动力学&#xff0c;反向动力学旨在子级对父级产生的影响。 使用IK&#xff0c;可以实现根据目标位置或方向来计算并调整角色的关节&#xff08;骨骼&#xff09;链&#xff0c;以使角色的末端&#xff…

关节点检测

https://www.bilibili.com/video/BV19g4y1777q/?p2&spm_id_frompageDriver 关节点检测全流程 YOLO:单阶段&#xff0c;快&#xff1b; MMPose&#xff1a;双阶段&#xff0c;准&#xff1b; 标注工具Labelme 用Labelme标注样本数据集

FastDFS 分布式集群搭建详解

文章目录 前言1、整体架构2、安装配置FastDFS集群2.1 配置tracker2.2 配置storage 3、启动集群4、查看集群情况5、nginx配置5.1 配置storage的四台机器的nginx5.2 配置tracker的两台机器的nginx5.3 配置统一入口 前言 阅读本文章之前请先看上一篇单机版FastDFS安装配置详解&am…

为什么在产品设计和制造过程中要采用FMEA——SunFMEA软件

在产品设计和制造过程中&#xff0c;FMEA是一种非常重要的工具&#xff0c;用于评估潜在的故障模式及其对产品性能的影响。通过分析产品设计或流程中可能出现的故障模式&#xff0c;并评估其对产品性能和客户满意度的潜在影响&#xff0c;来预测和防止产品在生产和运行过程中出…

深入解析Linux中HTTP代理的工作原理

亲爱的Linux探险家们&#xff0c;准备好一起探索HTTP代理背后的神秘面纱了吗&#xff1f;在这个数字世界里&#xff0c;HTTP代理就像是一个神秘的中间人&#xff0c;默默地在你和互联网之间穿梭&#xff0c;为你传递信息。那么&#xff0c;这个神秘的中间人到底是如何工作的呢&…