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.hqwc.cn/news/460964.html

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

相关文章

跟着pink老师前端入门教程-day21+22

5.4 常见flex布局思路 5.5 背景线性渐变 语法&#xff1a; background: linear-gradient( 起始方向 , 颜色 1, 颜色 2, ...); background: -webkit-linear-gradient(left, red , blue); background: -webkit-linear-gradient(left top, red , blue); 背景渐变必须添加浏览…

2024年【R2移动式压力容器充装】考试题及R2移动式压力容器充装复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试题是安全生产模拟考试一点通总题库中生成的一套R2移动式压力容器充装复审考试&#xff0c;安全生产模拟考试一点通上R2移动式压力容器充装作业手机同步练习。2024年【R2移动式压力容器充装】…

Markdown:简洁高效的文本标记语言

引言 在当今信息爆炸的时代&#xff0c;我们需要一种简洁、高效的文本标记语言来排版和发布内容。Markdown应运而生&#xff0c;它是一种轻量级的文本标记语言&#xff0c;以其简单易学、易读易写的特点&#xff0c;成为了广大写作者的首选工具。本文将介绍Markdown的语法优缺…

适用于 Windows 和 Mac 的 16 款最佳数据恢复软件

数据恢复软件是找回因硬盘损坏、病毒攻击或意外删除数据等原因而在设备上丢失的数据的最佳方法。在数字世界中&#xff0c;丢失数据是一件非常糟糕的事情&#xff0c;这会让许多人的情况变得更糟。使用最佳数据恢复软件可以减轻您必须努力恢复丢失数据的压力。它将带回您的大部…

推荐研发度量思码逸的研发度量工具及视频教学

目前国内做研发度量中&#xff0c;思码逸的研发度量工具的确做的不错&#xff0c;网址是&#xff1a;思码逸-专业的软件研发效能度量分析平台 看到一个不错的介绍视频&#xff1a;《让数据说话&#xff0c;高效盘点企业研发效能》&#xff0c; 地址是&#xff1a;视频课程&…

注意啦,MySQL8.0最新版是没有utf8选项,但是有utf8mb3和utf8mb4选项

今天在安装完MySQL最新版&#xff08;8.0.36&#xff09;&#xff0c;然后用navicat连接数据&#xff0c;创建数据库的时候&#xff0c;发现: MySQL最新版是没有utf8选项&#xff0c;但是有utf8mb3和utf8mb4选项 然后就只能卸载掉最新版&#xff0c;安装了8.0.28. &#xff08…

Git简单了解

文章目录 1、Git概述2、Git下载与安装3、Git代码托管服务3.1、使用码云托管服务 1、Git概述 什么是Git Git是一个分布式版本控制工具&#xff0c;主要用于管理开发过程中的源代码文件&#xff08;Java类、xml文件、html页面等&#xff09;&#xff0c;在软件开发过程中被广泛使…

ansible通过playbook批量部署服务

ansible通过playbook批量部署服务 一、对单机和组的执行playbook配置命令 1、对单台服务器执行playbook&#xff1a; 在单台服务器172.20.26.198上安装nginx&#xff0c;启动nginx。 vim nginx.yml #编写剧本 --- - hosts: 172.20.26.198 remote_user: root tasks: -…

2024.02.08

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent) :QWidget(parent),ui(new Ui::Widget) {ui->setupUi(this);this->setWindowIcon(QIcon(":/zh.png"));ui->lineEdit->setPlaceholderText("账号/手…

vue3集成bpmn

文章目录 前言一、依赖二、汉化配置1.引入文件2.样式文件 总结 前言 vue3 集成bpmn 配置工作流 一、依赖 "bpmn-js": "^7.3.1", "bpmn-js-properties-panel": "^0.37.2", "bpmn-moddle": "^6.0.0", "camu…

手把手教你玩转蓝牙模块(原理+驱动)

head: title: 手把手教你玩转蓝牙模块&#xff08;原理驱动&#xff09; description: 手把手教你玩转蓝牙模块&#xff08;原理驱动&#xff09; 作为嵌入式开发工程师&#xff0c;蓝牙模块怎能少呢&#xff1f; 蓝牙模块广泛应用在各种电子器件&#xff0c;比如手机、蓝牙耳…

安全技术和防火墙

安全技术 防火墙&#xff1a;防止外面进来&#xff0c;帮忙过滤筛选流量 防水墙&#xff1a;防止从里面出去 防火墙的分类 按保护范围分类 1.主机防火墙&#xff08;服务范围为当前一台主机&#xff09; 2.网络防火墙&#xff08;服务范围为防火墙一侧的局域网&#xff09; 按…