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/668375.shtml

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

相关文章

RPM与YUM

RPM RPM是Red Hat Package Manager的缩写&#xff0c;它是一种用于安装、卸载、升级和管理RPM包的工具。RPM使用一种数据库记录的方式来将软件安装到Linux系统&#xff0c;可以自动解决依赖性问题&#xff0c;并且提供了查询和校验等功能。 以下是使用rpm的基本操作&#xff…

python Flask 写一个简易的 web 端程序(附demo)

python Flask 写一个简易的 web 端程序 &#xff08;附demo&#xff09; 介绍简单介绍装饰器 app.route("/") 进阶增加接口设置端口 静态网页核心代码完整代码 介绍 Flask 是一个用于构建 Web 应用程序的轻量级 Python Web 框架。它设计简单、易于学习和使用&#x…

Python XML 转 JSON,XML 转字典

今天我们将学习如何在 Python 中将 XML 转换为 JSON 和 XML 转换为字典。我们可以使用 Python 的 xmltodict 模块来读取 XML 文件并将其转换为字典或 JSON 数据。我们还可以在大型 XML 文件上进行流式处理&#xff0c;并将其转换为字典。在进入编码部分之前&#xff0c;让我们首…

[N-139]基于springboot,vue宠物领养系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vue3element-plus 服务端技术&#xff1a;springbootmybatis-plusr…

Vue-easy-tree封装及使用

1.使用及安装 下载依赖 npm install wchbrad/vue-easy-tree引入俩种方案 1.在main.js中引入 import VueEasyTree from "wchbrad/vue-easy-tree"; import "wchbrad/vue-easy-tree/src/assets/index.scss" Vue.use(VueEasyTree)2.当前页面引入 import VueEa…

构建企业私域流量池:新时代的客户管理策略

随着互联网的发展和数字化时代的来临&#xff0c;企业面临的竞争环境日趋激烈。为了在众多竞争者中脱颖而出&#xff0c;许多企业开始转向私域流量的建设。私域流量是企业通过自有渠道获取的、可以自由支配的流量&#xff0c;对于提升品牌忠诚度、促进销售增长具有重要意义。本…

PAT-Apat甲级题1007(python和c++实现)

PTA | 1007 Maximum Subsequence Sum 1007 Maximum Subsequence Sum 作者 CHEN, Yue 单位 浙江大学 Given a sequence of K integers { N1​, N2​, ..., NK​ }. A continuous subsequence is defined to be { Ni​, Ni1​, ..., Nj​ } where 1≤i≤j≤K. The Maximum Su…

在建站和小程序方面,公司如何提升客户的体验

在建站和小程序方面&#xff0c;公司可以通过以下几个方面来提升客户的体验&#xff1a; 了解客户需求&#xff1a;在项目开始之初&#xff0c;深入了解客户的业务需求、目标受众、品牌风格等&#xff0c;是至关重要的。通过与客户的深入沟通&#xff0c;可以更好地把握其需求…

2024年第三届能源与环境工程国际会议(CFEEE 2024) | Ei&Scopus双检索

会议简介 Brief Introduction 2024年第三届能源与环境工程国际会议(CFEEE 2024) 会议时间&#xff1a;2024年12月12日-14日 召开地点&#xff1a;澳大利亚凯恩斯 大会官网&#xff1a;CFEEE 2024-2024 International Conference on Frontiers of Energy and Environment Engine…

day42_jdbc

今日内容 0 复习昨日 1 JDBC概述 2 JDBC开发步骤 3 完成增删改操作 4 ResultSet 5 登录案例 0 复习昨日 1 写出JQuery,通过获得id获得dom,并给input输入框赋值的语句 $(“#id”).val(“值”) 2 mysql内连接和外连接的区别 内连接只会保留完全符合关联条件的数据 外连接会保留表…

如何在linux下使用openssl自签https的ip证书配置nginx

《如何在linux下使用openssl自签https的ip证书配置nginx》首发牧马人博客转发请加此提示 如何在linux下使用openssl自签https的ip证书配置nginx 背景 **<<如何在linux下使用openssl自签https的ip证书配置nginx>>**这篇文章的诞生跟上篇&#xfeff;&#xfeff;浅…

antv/x6节点添加鼠标悬浮高亮和删除功能

antv/x6节点添加鼠标悬浮高亮和删除功能 效果鼠标悬浮高亮鼠标移出恢复原状态 效果 鼠标悬浮高亮 this.graph.on(node:mouseenter, ({ node }) > {node.addTools({name: button-remove,args: {x: 100%,y: 0,offset: { x: 0, y: 0 },},})})鼠标移出恢复原状态 this.graph.on(…

Java/Python/Go不同开发语言基础数据结构和相关操作总结-数组篇

Java/Python/Go不同开发语言基础数据结构和相关操作总结 1. Java1.1 静态数组Object[]1.1.1 数据结构和定义方式1.1.2 增加1.1.3 修改1.1.4 查询1.1.5 删除1.1.6 获取元素的位置1.1.7 获取总长度1.1.8 正向排序1.1.9 逆向排序 1.2 动态列表List\<Object>1.2.1 数据结构和…

如何实现冻干机和产品全生命周期的验证和监测?

为什么冻干需要工艺优化和合规性 冻干是制药和生物技术产品的关键工艺&#xff0c;需要精确控制关键的温度和压力参数。通过遵守 GMP 和 FDA 合规性等监管准则&#xff0c;您可以生产出更高质量的产品&#xff0c;避免不必要的浪费&#xff0c;并缩短产品上市时间。 要想在冻干…

Java on Azure Tooling 2024年1月更新|Azure Key Vault 支持、示例项目创建支持及更多

作者&#xff1a;Jialuo Gan - Program Manager, Developer Division At Microsoft 排版&#xff1a;Alan Wang 大家好&#xff0c;欢迎来到 2024 年 Java on Azure 工具的首次更新。在本次更新中&#xff0c;我们将介绍对于 Azure Key Vault 支持、基于 Azure 示例项目的创建支…

Python入门指北二十六

Python中如何实现静态类型检查和动态类型检查&#xff1f;你有哪些工具推荐&#xff1f; Python中有许多常用的Web开发框架&#xff0c;每个框架都有其独特的特点和适用场景。以下是一些常用的Web开发框架及其特点&#xff1a; Django&#xff1a; 特点&#xff1a;Django是一…

更换服务器是否需要更换SSL证书?

在互联网时代&#xff0c;随着企业和网站的发展&#xff0c;更换服务器是一种常见的需求。然而&#xff0c;许多网站管理员在更换服务器时是否需要更换SSL证书存在疑虑。本文将就此问题进行探讨&#xff0c;帮助您了解在更换服务器时是否需要更换SSL证书。 1、SSL证书的绑定 SS…

【面试】冲刺春招!每天三十道面试题——Java基础篇(一)

目录 一 JDK 和 JRE 的区分 二 简述编码的作用以及记事本的实现原理 三 基本类型有哪些&#xff1f;分别占据多少空间&#xff1f; 四 java中布尔类型的空间大小是怎么定下来的&#xff1f;为什么不是1bit&#xff0c; 把考虑因素说一下 五 int类型和float类型哪一个精度更…

nohost本地部署

1、安装node Node.js 官方网站下载&#xff1a;https://nodejs.org/en/download/ 2、安装whistle 安装命令为 npm install -g whistle 或 npm install -g cnpm --registryhttps://registry.npm.taobao.org 后&#xff0c;使用 cnpm install -g whistle 来安装 3、插件修改 官方…

线性矩阵不等式LMI与李雅普诺夫Lyapunov稳定性

文章目录 线性矩阵不等式&#xff08;Linear Matrix Inequality&#xff0c;LMI&#xff09;例子 Lyapunov稳定性Schur Complement定义Schur Complement作用/性质利用Schur Complement将LMI和Lyapunov联系起来 线性矩阵不等式&#xff08;Linear Matrix Inequality&#xff0c;…