antd-Table-可视化数据滚动

在这里插入图片描述

代码

// 使用方式
const Index = () => {useScroll();return <Table />;
}
import { useEffect, useRef, useState } from 'react';export const useScroll = (() => {let timer;function start() {const [isScroll, setIsScroll] = useState(true);const scrollTopRef = useRef(0);useEffect(() => {const scrollHandler = () => {const el = document.querySelector('.ant-table-body');if ((el?.scrollTop as number) >= 300) return;timer && clearInterval(timer);timer = setInterval(() => {requestAnimationFrame(() => {scrollTopRef.current += 2;el?.scrollTo(0, scrollTopRef.current);if ((el?.scrollTop as number) >= 300) {scrollTopRef.current = 0;}});}, 60);if (!isScroll) {timer && clearInterval(timer);}};scrollHandler();}, [isScroll]);useEffect(() => {const el = document.querySelector('.ant-table-body');const enter = () => {setIsScroll(false);};const leave = () => {setIsScroll(true);};el?.addEventListener('mouseenter', enter);el?.addEventListener('mouseleave', leave);return () => {el?.removeEventListener('mouseenter', enter);el?.removeEventListener('mouseleave', leave);};}, []);}return start;
})();

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

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

相关文章

excel批量修改一列单价的金额并保留1位小数

1.打开表格&#xff0c;要把单价金额变成现在的两倍&#xff0c;数据如下&#xff1a; 2.把单价这一列粘贴到一个新的sheet页面&#xff0c;在B2单元格输入公式&#xff1a;A2*2 然后按enter回车键,这时候吧鼠标放到B2单元格右下角&#xff0c;会出现一个黑色的小加号&#xf…

重大更新来袭!!《植物大战僵尸杂交版V2.1+修改器+融合版》

大家好&#xff01;每个软件更新总是令人兴奋不已。前段时间介绍的《植物大战僵尸》系列以其独特的策略玩法和丰富的植物角色&#xff0c;赢得了很多玩家的喜爱。而在今天&#xff0c;这款经典游戏全网最新版本——《植物大战僵尸&#xff1a;杂交版V2.1》正式推出&#xff0c;…

Redis组建哨兵模式

主172.17.60.131 从172.17.60.130、172.17.60.129 redis部署 [rootlocalhost app]# tar xf redis-6.2.9.tar.gz [rootlocalhost app]# cd redis-6.2.9/ [rootlocalhost redis-6.2.9]# make MALLOClibc [rootlocalhost redis-6.2.9]# make install PREFIX/usr/local/redis…

【MySQL系列】隐式转换

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

ctfshow web入门 nodejs

web334 有个文件下载之后改后缀为zip加压就可以得到两个文件 一个文件类似于index.php 还有一个就是登录密码登录成功就有flag username:ctfshow password:123456因为 return name!CTFSHOW && item.username name.toUpperCase() && item.password passwor…

产科管理系统 专科电子病历系统源码,前后端分离架构,多家医院产科广泛运用,系统稳定,功能齐全

产科管理系统 专科电子病历系统源码&#xff0c;前后端分离架构&#xff0c;多家医院产科广泛运用&#xff0c;系统稳定&#xff0c;功能齐全 产科管理系统&#xff0c;特别是产科信息管理系统&#xff08;Obstetrical Information Management System&#xff0c;简称OIMS&…

智能井盖监测系统:守护城市安全的新防线

​ ​​在快速发展的现代都市中&#xff0c;井盖作为连接地上与地下世界的“隐形门”&#xff0c;其安全状态直接关系到市民的生命财产安全。随着物联网、大数据及人工智能技术的飞速发展&#xff0c;智能井盖监测系统的出现为解决传统井盖管理难题提供了创新方案&#xff0…

【算法笔记自学】入门篇(2)——算法初步

4.1排序 自己写的题解 #include <stdio.h> #include <stdlib.h>void selectSort(int A[], int n) {for(int i 0; i < n - 1; i) { // 修正索引范围int k i;for(int j i 1; j < n; j) { // 修正索引范围if(A[j] < A[k]) {k j;}}if (k ! i) { // 仅在…

跨境人最怕的封店要怎么规避?

跨境人最怕的是什么&#xff1f;——封店 造成封店的原因很多&#xff0c;IP关联、无版权售卖、虚假发货等等&#xff0c;其中IP关联这个问题导致店铺被封在跨境商家中简直是屡见不鲜 IP关联&#xff0c;是指被海外平台检测到多家店铺开设在同一个站点上的情况。我们知道有些…

统计信号处理基础 习题解答11-12

题目 证明 的MAP估计量为 其中是一个的矢量, 是一个可逆的p*p的矩阵。也就是说&#xff0c;MAP估计量对可逆的线性变换是可以变换的。 解答 已知的联合概率密度 且&#xff1a; 现在知道&#xff1a; 那么为了获得变换后的MAP&#xff0c;首先需要根据求出 根据概率密度变换…

C++入门 容器适配器 / stack queue模拟实现

目录 容器适配器 deque的原理介绍 stack模拟实现 queue模拟实现 priority_queue模拟实现 仿函数 容器适配器 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总 结)&#xff0c;该种模式是将一个类的接口转换成客户希望…

深度学习Week19——学习残差网络和ResNet50V2算法

文章目录 深度学习Week18——学习残差网络和ResNet50V2算法 一、前言 二、我的环境 三、论文解读 3.1 预激活设计 3.2 残差单元结构 四、模型复现 4.1 Residual Block 4.2 堆叠Residual Block 4.3. ResNet50V2架构复现 一、前言 &#x1f368; 本文为&#x1f517;365天深度学…

Python中异步事件触发

1、问题背景 在Python中&#xff0c;我想创建一个由事件生成控制流程的类结构。为此&#xff0c;我做了以下工作&#xff1a; class MyEvent: EventName_FunctionName {}classmethoddef setup(cls, notificationname, functionname):if notificationname in MyEvent.EventN…

ONLYOFFICE 8.1版本震撼来袭,让办公更高效、更智能

官网链接&#xff1a; 在线PDF查看器和转换器 | ONLYOFFICE 在线办公套件 | ONLYOFFICE 随着科技的不断发展&#xff0c;办公软件已经成为现代企业提高工作效率、实现信息共享的重要工具。在我国&#xff0c;一款名为ONLYOFFICE的在线办公套件受到了越来越多企业的青睐。今天…

[TensorFlow-Lite][深度学习]【快速简介-1】

前言&#xff1a; 很多场景下面我们需要需要把我们的深度学习模型部署到Android,IOS 手机上面. Google 通过TensorFlow Lite 提供了对应的解决方案. 目录&#xff1a; 端侧部署优点 硬件支持 性能 应用案例 一 端侧部署优点 1; 很多场景下面&#xff1a; 无网络,数据无法…

昇思25天学习打卡营第10天|基于MindSpore实现BERT对话情绪识别

基于MindSpore实现BERT对话情绪识别 模型简介数据集模型构建模型验证模型推理自定义推理数据集 模型简介 BERT全称是来自变换器的双向编码器表征量&#xff08;Bidirectional Encoder Representations from Transformers&#xff09;&#xff0c;它是Google于2018年末开发并发…

HTML超链接和锚链接

HTML超链接和锚链接 一、定义 HTML的超链接&#xff08;Hyperlink&#xff09;用于在网页之间创建链接&#xff0c;使用户可以点击这些链接来导航到其他页面或资源。 二、基本语法 1、语法 HTML中的超链接使用a标签来定义 <a href"URL">链接文本</a&g…

yolov8实战——yolov8TensorRT部署(python推理)(保姆教学)

yolov8实战——yolov8TensorRT部署&#xff08;python推理&#xff09;&#xff08;保姆教学&#xff09; 一 、准备好代码和环境安装TensorRt下载代码和安装环境 部署和推理构建ONNX构建engine无torch推理torch推理 最近用到yolov8&#xff0c;但是寻找了一圈才找到了yolov8最…

[SAP ABAP] 版本管理

版本管理是指软件开发过程中各种程序代码、配置文件以及说明文档等文件变更的管理 生成版本 版本管理 对比版本 点击上述版本管理即可进行版本对比操作 补充扩展 我们可以使用事务码SE10对传输请求进行创建、修改、删除、合并以及更改所有者等操作 使用事务码SCC1进行不同cl…

3D生成模型TripoSR完美搭建流程,包含所有问题解决方案!

最近需要使用3D生成模型,无意中看到了TripoSR,觉得效果还行,于是打算在Linux系统上部署一下,结果遇到很多坑,在这里写一下详细的部署流程和部署过程中遇到的问题。 下面是TripoSR的源码地址。 GitHub - VAST-AI-Research/TripoSRContribute to VAST-AI-Research/TripoSR…