通过ref 操作dom , 点击按钮后跳转到页面指定图片位置

滚动图片到视图

定义了一个名为 scrollToIndex 的函数,它接受一个参数 index。当按钮被点击时,这个函数会被调用,并根据传入的 index 值来滚动到对应的图片。

image.png
以 alt 来标记图片位置

alt=“Tom”

import { useRef } from "react";const RollPicture = () => {const listRef = useRef(null);function scrollToIndex(index: any) {const listNode: any = listRef.current;// 这一行假设了一个特定的 DOM 结构const imgNode = listNode.querySelectorAll("li > img")[index];imgNode.scrollIntoView({behavior: "smooth",block: "nearest",inline: "center",});}return (<><nav><button onClick={() => scrollToIndex(0)}>- 0 </button><button onClick={() => scrollToIndex(1)}>- 1 </button><button onClick={() => scrollToIndex(2)}>- 2 </button></nav><div><ul ref={listRef}><li><span>- 0 </span><img src="https://placekitten.com/g/200/200" alt="Tom" /></li><li><span>- 1 </span><img src="https://placekitten.com/g/300/200" alt="Maru" /></li><li><span>- 2 </span><img src="https://placekitten.com/g/250/200" alt="Jellylorum" /></li></ul></div></>);
};export default RollPicture;

在函数内部,我们首先通过 listRef.current 获取到 listRef 引用所指向的 DOM 元素,这里是一个 ul 元素。

然后,我们通过 listNode.querySelectorAll("li > img")[index] 获取到特定索引位置的图片元素 imgNode。这里假设了一个特定的 DOM 结构,即 ul 元素下的每个 li 元素中都包含一个 img 元素。

最后,我们调用 imgNode.scrollIntoView() 方法,将图片滚动到视图中。我们通过传入一个配置对象来指定滚动的行为,包括 behavior(滚动行为)、block(垂直方向对齐方式)和 inline(水平方向对齐方式)。

在组件的返回值中,我们渲染了一个包含按钮和图片列表的结构。

在按钮部分,我们为每个按钮设置了一个点击事件,并通过调用 scrollToIndex 函数来滚动到对应的图片。每个按钮都有一个不同的索引值作为参数。

在图片列表部分,我们将 listRef 设置为 ul 元素的 ref 属性,以便将引用与该元素关联起来。同时,我们渲染了几个 li 元素,每个元素包含一个图片和一个描述。

这样,当用户点击按钮时,对应的图片会滚动到视图中心。

拓展一下:imgNode.scrollIntoView()

imgNode.scrollIntoView() 是一个 DOM 方法,用于将指定的元素滚动到可见区域。

在这个代码片段中,我们使用了一个配置对象作为 scrollIntoView() 方法的参数。配置对象包括以下属性:

  • behavior:指定滚动的行为,这里设置为 "smooth",表示平滑滚动。
  • block:指定垂直方向上的对齐方式,这里设置为 "nearest",表示滚动到最近的边界。
  • inline:指定水平方向上的对齐方式,这里设置为 "center",表示水平居中对齐。

通过使用这些配置,scrollIntoView() 方法会将 imgNode 元素滚动到可见区域,并以平滑的方式进行滚动,使其在垂直和水平方向上都居中对齐。

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

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

相关文章

国标视频云服务EasyGBS国标视频平台迁移服务器后无法启动的问题解决方法

国标视频云服务EasyGBS支持设备/平台通过国标GB28181协议注册接入&#xff0c;并能实现视频的实时监控直播、录像、检索与回看、语音对讲、云存储、告警、平台级联等功能。平台部署简单、可拓展性强&#xff0c;支持将接入的视频流进行全终端、全平台分发&#xff0c;分发的视频…

使用DOSBOX运行TurboC2,TC2使用graphics库绘图

Turbo C是由美国Borland公司开发的一套C语言程序开发工具&#xff0c;Borland公司是一家专门从事软件开发、研制的大公司。该公司相继推出了一套Turbo系列软件&#xff0c;如Turbo BASIC、Turbo Pascal、Turbo Prolog&#xff0c;这些软件很受用户欢迎 [1] 。 Turbo C集成了程序…

2022年06月 C/C++(七级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C++编程(1~8级)全部真题・点这里 第1题:有多少种二叉树 输入n(1<n<13),求n个结点的二叉树有多少种形态 时间限制:1000 内存限制:65536 输入 整数n 输出 答案 样例输入 3 样例输出 5 这个问题可以使用动态规划的方法来解决。我们可以定义一个数组dp,其中dp[i]表…

北京APP外包开发需要注意的问题

开发APP的过程中&#xff0c;由于开发APP需要投入大量的时间、精力和资源&#xff0c;所以在开始前一定要做好充足的准备和规划。您需要注意以下重点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1…

三相PMSM的坐标变换

三相PMSM的坐标变换 三相PMSM的数学模型具有复杂性和耦合性的多变量系统。因此需要对其进行降阶和解耦变换。 Vα&#xff0c;Vb&#xff0c;Vc是自然坐标系。 Vα&#xff0c;Vβ是静止坐标系。 Vd&#xff0c;Vq是同步旋转坐标系。 自然坐标系 三相永磁同步电机的驱动电路…

计算机毕设之基于python+django+mysql的影片数据爬取与数据分析(包含源码+文档+部署教程)

影片数据爬取与数据分析分为两个部分&#xff0c;即管理员和用户。该系统是根据用户的实际需求开发的&#xff0c;贴近生活。从管理员处获得的指定账号和密码可用于进入系统和使用相关的系统应用程序。管理员拥有最大的权限&#xff0c;其次是用户。管理员一般负责整个系统的运…

使用maven创建springboot项目

创建maven快速启动项目 命令行或者idea、eclipse快捷创建也可以 pom.xml下project项目下导入springboot 父工程 <!--导入springboot 父工程--> <parent><artifactId>spring-boot-starter-parent</artifactId><groupId>org.springframework.bo…

CSAPP的Lab学习——AttackLab

文章目录 前言一、阶段一攻击二、阶段二攻击三、阶段三攻击四、阶段四攻击五、阶段五攻击总结 前言 一个本硕双非的小菜鸡&#xff0c;备战24年秋招。刚刚看完CSAPP&#xff0c;真是一本神书啊&#xff01;遂尝试将它的Lab实现&#xff0c;并记录期间心酸历程。 代码下载 官方…

thinkPHP项目搭建

1 宝塔添加站点 &#xff08;1&#xff09;打开命令提示行&#xff0c;输入以下命令&#xff0c;找到hosts文件。 for /f %P in (dir %windir%\WinSxS\hosts /b /s) do copy %P %windir%\System32\drivers\etc & echo %P & Notepad %P &#xff08;2&#xff09;添加域…

html2canvas 截图空白 或出现toDataURL‘ on ‘HTMLCanvasElement或img标签没截下来 的所有解决办法

1.如果截图空白&#xff1a; 1.1以下的参数是必须要有的。 width: shareContent.offsetWidth, //设置canvas尺寸与所截图尺寸相同&#xff0c;防止白边height: shareContent.offsetHeight, //防止白边logging: true,useCORS: true,x:0,y:0,2&#xff0c;如果出现了报错 toData…

成集云 | 多维表格自动化管理jira Server项目 | 解决方案

源系统成集云目标系统 方案介绍 基于成集云集成平台&#xff0c;在多维表格中的需求任务信息自动创建、更新同步至 Jira Server 的指定项目中&#xff0c;实现多维表格中一表管理 Jira Server 中的项目进度。 维格表是一种新一代的团队数据协作和项目管理工具&…

基于深度学习网络的人员吸烟行为检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 clc; clear; close all; warning off; addpath(genpath(pwd)); rng(default)load FRCNN.mat I…

jmeter 准确的吞吐量定时器 Precise Throughput Timer

准确的吞吐量定时器使用实例&#xff1a; 说明&#xff1a;配置10个线程&#xff0c;每个线程请求200次&#xff0c;通过准确地屯托梁定时器模拟QPS为20的场景 配置测试接口参考链接 配置jmeter测试脚本&#xff0c;主要关注准确的吞吐量定时器参数配置 目延迟线程已确保目标吞…

Mariadb高可用(四十)

目录 一、概述 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;组成 &#xff08;三&#xff09;特点 &#xff08;四&#xff09;工作原理 二、实验要求 三、构建MHA &#xff08;一&#xff09;ssh免密登录 &#xff08;二&#xff09;安装mariadb数据库…

python技术面试题合集(二)

python技术面试题 1、简述django FBV和CBV FBV是基于函数编程&#xff0c;CBV是基于类编程&#xff0c;本质上也是FBV编程&#xff0c;在Djanog中使用CBV&#xff0c;则需要继承View类&#xff0c;在路由中指定as_view函数&#xff0c;返回的还是一个函数 在DRF中的使用的就是…

内网隧道代理技术(二十一)之 CS工具自带中转技术上线不出网机器

CS工具自带上线不出网机器 如图A区域存在一台中转机器,这台机器可以出网,这种是最常见的情况。我们在渗透测试的过程中经常是拿下一台边缘机器,其有多块网卡,边缘机器可以访问内网机器,内网机器都不出网。这种情况下拿这个边缘机器做中转,就可以使用CS工具自带上线不出网…

windows-nessus安装

1、下载 路径&#xff1a;Download Tenable Nessus | Tenable 2、获取active code 路径&#xff1a;Tenable Nessus Essentials Vulnerability Scanner | Tenable 3、安装 challenge code:上图马赛克位置 active code:获取active code第二张图片的马赛克位置 4、激活 5、安装…

word中标题及公式自动编号

word中公式自动编号 1. 实现目标2. 详细步骤2.1 添加自动编号功能2.2 输入标题并编号2.3 新建公式2.3.1 编辑公式2.3.4 公式编号的交叉引用2.3.5 公式位置变动以及更新正文中的编号 在word中自动编号公式一直是一个老大难问题&#xff0c;现在通过总结网友们提供的方法&#xf…

【80天学习完《深入理解计算机系统》】第十二天3.6数组和结构体

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客&#xff0c;如有问题交流&#xff0c;欢迎评论区留言&#xff0c;一定尽快回复&#xff01;&#xff08;大家可以去看我的专栏&#xff0c;是所有文章的目录&#xff09;   文章字体风格&#xff1a; 红色文字表示&#…

稀疏数组的实现

文章目录 目录 文章目录 前言 一 什么是稀疏数组? 二 稀疏数组怎么存储数据? 三 稀疏数组的实现 总结 前言 大家好,好久不见了,这篇博客是数据结构的第一篇文章,望大家多多支持! 一 什么是稀疏数组? 稀疏数组&#xff08;Sparse Array&#xff09;是一种数据结构&a…