JS控制元素平滑滚动,页面自动滚动锚点实现

使用 scrollIntoView 实现元素内子元素的平滑滚动,
下面是模拟接口list返回,然后通过按钮切换下一个,页面就会滚动到响应的位置
具体 scrollIntoView 有一些其他参数来配置滚动的具体交换,网上去查即可
备注:下面的代码使用 Vite框架 + React Hooks + 简单的TS,实现的方案都是一样,具体的代码可能不同

实现效果如下:
请添加图片描述

首先第一步,配置电脑设置
如图所示:打开【控制面板】- 搜索【性能】 - 调整 Windows 的外观和性能选项 - 开启【窗口内的动画控件和元素】
在这里插入图片描述

第二步,写页面和样式代码
这里使用了react + ts,不管用什么语言框架,理解其中思路,代码实现可能不同

// tsx 文件
import { useEffect, useRef, useState } from 'react'
import './index.css'

export default function Index() {
  const listRef = useRef<any>() // 需要滚动的父容器
  const [acitve, setActive ] = useState(0) //当前激活项
  const [list, setList] = useState<any>([])

  // 生命周期获取接口
  useEffect(() => {
    getData()
  }, [])
  
  // 监听active激活位置的变化,滚动到相应为止
  useEffect(() => {
    let childEl = listRef.current.childNodes[acitve]
    // 由于接口是异步的,一开始进入页面会执行要处理初始情况,list有值了才开始
    if(list.length){
      childEl.scrollIntoView({ behavior: 'smooth' });
    }
  }, [acitve])

  // 这里模仿接口来的数据
  const getData = async () => {
    let res = await new Promise(resolve => {
      setTimeout(() => {
        return resolve([0,1,2,3,4,5,6,7,8,9])
      }, 500)
    })
    setList(res)
  }
  
  // 设置当前激活项目
  const onChange = () => {
    setActive(pre => {
      let next = pre >= 9 ? 0: pre+1
      return next
    })
  }

  return (
    <div className='page'>
      <div className='head'>
        <span>acitve: {acitve}</span>
        <button onClick={onChange}>next</button>
      </div>
      <div className='list_warp'>
        <div className='list' ref={listRef}>
          { list.map((item:number) => 
            <div key={item} className='card'>{item}</div>
          )}
        </div>
      </div>
    </div>
  )
}

对应的 index.css

/* 同目录下的index.css */
.page{
  margin: 24px;
  width: 300px;
}

.list_warp{
  margin: 24px 0;
  width: 300px;
  height: 60vh;
  padding: 12px;
  border: 2px solid red;
  background:  pink;
  box-sizing: border-box;
}

.list{
  height: 100%;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar{
    display: none;
  }
}

.head{
  display: flex;
  justify-content: space-between;
}

.card{
  overflow: hidden;
  background: greenyellow;
  margin-bottom: 12px;
  height: 200px;
  border: 1px solid green;
  box-sizing: border-box;
}

到这里就是实现了效果了
请添加图片描述

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

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

相关文章

uniapp 编译后分包下静态图片404问题解决方案

如上图官方说明&#xff1a; 在分包下建立一个static文件夹即可&#xff1a; 分包内代码引用图片 <image src"/分包名称/img/图片名称"></image> <image src"/dataView/img/图片名称"></image>

Centos中一些有趣的命令

目录 1.sl 小火车 2. cowsay 会说话的牛 3.toilet/figlet 图形化输出 4.aafire 小火焰 5.linux_logo 显示系统logo 1.sl 小火车 yum install sl 2. cowsay 会说话的牛 yum install cowsay 3.toilet/figlet 图形化输出 yum install toilet yum install figlet 4.aafire 小火…

Python打造的智能家居神器:Home Assistant

引言 在数字化时代&#xff0c;智能家居系统越来越多地融入我们的生活。而为了打造一个安全、可控、高效的智能家庭环境&#xff0c;一个优秀的开源智能家居控制平台至关重要。Home Assistant以Python为开发语言&#xff0c;遵循开放源代码协议&#xff0c;专注于本地控制与隐私…

别让这6个UI设计雷区毁了你的APP!

一款成功的APP不仅仅取决于其功能性&#xff0c;更取决于用户体验&#xff0c;这其中&#xff0c;UI设计又至关重要。优秀的UI设计能够为用户带来直观、愉悦的交互体验&#xff0c;甚至让用户“一见钟情”&#xff0c;从而大大提高产品吸引力。 然而&#xff0c;有很多设计师在…

OpenHarmony 资源调度之内存管理源码分析

作者&#xff1a;张守忠 1 内存管理简介 内存管理部件位于全局资源调度管控子系统中&#xff0c;基于应用的生命周期状态&#xff0c;更新进程回收优先级列表&#xff0c;通过内存回收、查杀等手段管理系统内存&#xff0c;保障内存供给。 1.1 内存管理框架 内存管理部件主要…

【Linux】编写并运行Shell脚本程序操作实例

关于Shell脚本的介绍&#xff1a; Shell脚本是一种用于自动化任务和简化常见操作的脚本语言&#xff0c;通常用于Linux和Unix环境中。Shell脚本允许用户通过编写一系列命令和逻辑语句来执行一系列任务&#xff0c;从而提高了工作效率和自动化水平。 以下是关于Shell脚本的详细…

OSCP靶场--ZenPhoto

OSCP靶场–ZenPhoto 考点(Zenphoto < 1.4.1.4 RCE CVE-2010-3904提权) 1.nmap扫描 ## ┌──(root㉿kali)-[~/Desktop] └─# nmap 192.168.158.41 -sV -sC -Pn --min-rate 2500 -p- Starting Nmap 7.92 ( https://nmap.org ) at 2024-04-11 21:14 EDT Warning: 192.16…

2024 年 3 月编程语言排行榜,Python 与其他语言之间的差距从未如此之大!

TIOBE 2024 年 3 月份的编程语言排行榜已经公布&#xff0c;官方的标题是&#xff1a;Python 与其他语言之间的差距从未如此之大&#xff08;The gap between Python and the rest has never been that large&#xff09; TIOBE 指数在二月份呈现出了相对平静的态势&#xff0…

QtCreator修改项目构建目录

文章目录 QtCreator修改项目构建目录问题描述方法一方法二 QtCreator修改项目构建目录 使用QtCreator编译Qt项目时&#xff0c;如有需求修改编译过程文件&#xff08;即Makefile、.o、.exe等文件&#xff09;存放目录&#xff0c;简单在工具–>选项–>构建和运行中修改D…

NCBI 数据下载

网上介绍的那几种直接下载NCBI数据的方法大都下载速度很慢&#xff0c;但是EBI (European Bioinformatics Institute) 下载很快&#xff0c;而且它的数据库和NCBI是共享的&#xff0c;所以我们可以直接从 EBI 下载。 1 、 确定要下载的 SRA 编号&#xff1b; 2 、 EBI (https…

每日一题---OJ题: 返回倒数第 k 个节点

片头 嗨! 小伙伴们,大家好! 今天我们来一起学习这道OJ题---返回倒数第k个结点,准备好了吗? 我们开始咯! 比如: 总共有5个结点,分别为 1->2->3->4->5 , 找倒数第一个结点,也就是"5" 题目很容易理解,我们先提供第一种思路 思路一: 假设链表长度为 n ,…

Execute-Assembly(3)

绕过检测 绕过前面检测的最简单的思路就是Patch ETW。而我想的是使用BOF进行Bypass ETW 以及Assembly加载。值得庆幸得是CobaltStrike官方以及有大佬已经做了这一部分的研究。 脚本学习 在官方的文档Beacon Object Files中&#xff0c;详细描写了怎么使用CNA和BOF。根据文档提供…

【opencv】示例-detect_blob.cpp

// 导入所需的OpenCV头文件 #include <opencv2/core.hpp> #include <opencv2/imgproc.hpp> #include <opencv2/highgui.hpp> #include <opencv2/features2d.hpp> // 导入向量和映射容器 #include <vector> #include <map> // 导入输入输出…

阿里云租用服务器GPU配置报价单_1年_一个月_1小时价格表

阿里云GPU服务器租用价格表包括包年包月价格、一个小时收费以及学生GPU服务器租用费用&#xff0c;阿里云GPU计算卡包括NVIDIA V100计算卡、T4计算卡、A10计算卡和A100计算卡&#xff0c;GPU云服务器gn6i可享受3折优惠&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云GPU…

智能制造六大核心发展方向,驱动企业数字化转型

在制造过程中&#xff0c;智能制造展现出非凡的活力&#xff0c;它使人与智能机器的协同工作成为可能。这不仅将制造自动化的概念提升至一个新的层次&#xff0c;更将其扩展至柔性化、智能化和高度集成化的领域。通过这样的革新&#xff0c;我们得以实现数字化智能工厂的落地生…

Vue的学习之旅-part5

Vue的学习之旅-part5 虚拟DOM的原理用JS模拟DOM结构 vue的方法、计算属性、过滤器computed:{} 计算属性computed计算属性的完全体computed计算属性和methods方法的区别&#xff1a;过滤器&#xff1a;filters:{ 多个方法 } Vuex 状态管理模式 前几篇博客: Vue的学习之旅-part1 …

城市道路井盖破损丢失目标检测数据集VOC-1377张

数据集格式&#xff1a;Pascal VOC格式(不包含分割路径的txt文件和yolo格式的txt文件&#xff0c;仅仅包含jpg图片和对应的xml) 图片数量(jpg文件个数)&#xff1a;1377 标注数量(xml文件个数)&#xff1a;1377 标注类别数&#xff1a;4 标注类别名称:["jg","jg…

ARM64架构栈帧回溯

文章目录 前言一、栈帧简介二、demo演示 前言 请参考&#xff1a;ARM64架构栈帧以及帧指针FP 一、栈帧简介 假设下列函数调用&#xff1a; funb() {func() }funa() {funb() }main() {funa() }main函数&#xff0c;funa函数&#xff0c;funb函数都不是叶子函数&#xff0c;其…

AWS服务器有哪些优势?

作为一家总部在美国的公司&#xff0c;AWS为什么会受到中国企业的喜爱&#xff1f;他有什么优势&#xff1f;九河云作为AWS合作伙伴&#xff0c;将会带读者展现使用AWS的优势。 首先是作为跨国企业&#xff0c;AWS在全球有数十个区域节点&#xff0c;这种广泛的地域覆盖不仅有…

IDEA2023连接服务器docker并部署ruoyi-cloud-plus项目

文章目录 TCP 方式连接docker1. 服务器docker配置修改查看虚拟机中Docker配置文件位置修改配置文件重启docker服务关闭防火墙 2. idea安装docker插件3. idea连接docker服务 部署ruoyi-cloud-plus项目1. 项目环境说明2. 安装Centos73. 安装docker4. idea配置服务器SSH连接5. ide…