overflow: auto滚动条跳到指定位置

news2024/11/23 17:03:27

点击对应模块跳转页面,滚动到对应模块,露出到可视范围

代码:

scrollToCurrentCard() {
      // treeWrapper是包裹多个el-tree组件的父级元素,也是设置overflow:auto的元素
      let treeWrapper = document.getElementsByClassName('treeWrapper')[0]
      // 获取点击对应的模块元素,距离页面顶部的距离,减去固定的Header头部所占的高度
      let offsetTop = treeWrapper.children[this.receiveParams.id - 1].offsetTop - 90
      // 或者滚动元素的页面高度,超过视窗高度就滚动到对应的位置,否则就不滚动
      let treeClientHeight = treeWrapper.clientHeight

      if (offsetTop >= treeClientHeight) {
        treeWrapper.scrollTo(0, offsetTop)
      } else {
        treeWrapper.scrollTo(0, 0)
      }
    }

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

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

相关文章

Kafka JNDI 注入分析(CVE-2023-25194)

Apache Kafka Clients Jndi Injection 漏洞描述 Apache Kafka 是一个分布式数据流处理平台,可以实时发布、订阅、存储和处理数据流。Kafka Connect 是一种用于在 kafka 和其他系统之间可扩展、可靠的流式传输数据的工具。攻击者可以利用基于 SASL JAAS 配置和 SAS…

赞不绝口!飞凌嵌入式全新子品牌ElfBoard好评如潮

飞凌嵌入式凭借十多年的企业级板卡开发与服务经验,深挖嵌入式学习市场的需求和痛点推出全新子品牌ElfBoard,旨在为嵌入式学习爱好者创造更具价值的学习体验。 ElfBoard旗下ELF 1及ELF 1S两款新品已经上市1个月了,两款开发板产品凭借高性价比…

假如我们进入了时间循环,那么如何在时间循环里做最优决策?

👨‍🎓博主简介 🏅云计算领域优质创作者   🏅华为云开发者社区专家博主   🏅阿里云开发者社区专家博主 💊交流社区:运维交流社区 欢迎大家的加入! 🐋 希望大家多多支…

温湿度监测更方便,食品物流很多都这样做!

在当今高度技术化的社会,温度监控不仅仅是一项科技应用,更是各行各业中确保稳定运作和产品质量的重要环节。 温度监控系统的应用不仅有助于维护生产条件,提高效率,还对确保产品质量和符合行业标准起着至关重要的作用。 客户案例 …

直播实时数仓基于DataLeap开放平台在发布管控场景的业务实践

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 背景 业务背景 随着字节业务的高速增长,业务场景越来越丰富,业务基于数据做的决策也越来越多,对数据的时效性要求也越来越高。…

CSDN中调整图片和文本样式

1.调整图片比例 插入图片后,觉得图片比例不协调,想改小点。只需要在文件后缀加个参数即可:?pic_center 60x。 NOTE:等号左边一定要加个空格,否则格式不生效 2.修改字体颜色 如上 NOTE:等号左边一定要…

搭建完全分布式Hadoop

文章目录 一、Hadoop集群规划二、在主节点上配置Hadoop(一)登录虚拟机(二)设置主机名(三)主机名与IP地址映射(四)关闭与禁用防火墙(五)配置免密登录&#xff…

Linux Centos配置邮件发送

Linux Centos配置邮件发送 这里使用的是外部发送邮件方式,也就是使用自己的账号发送 第一步 首先要开启STMP授权码,以QQ邮箱为例 配置文件 vim /etc/mail.rc找到之后在最下面添加如下 #邮箱set from3324855376qq.com #默认smtp发送,stmp…

简单聊聊java中各种常量池

一 引子 小试身手 首先我们来看一道题 Integer i1 127; Integer i2 127;System.out.println(i1 i2); //这种调用底层实际是执行的Integer.valueOf(127),里面用到了IntegerCache对象池//值大于127时,不会从对象池中取对象 Integer i3 128; Integ…

4S店汽车行业万能通用小程序源码系统 在线预约试驾+购车计算器 源码完全开源可二次开发

随着互联网技术的发展和普及,越来越多的消费者开始依赖于互联网进行消费。传统的汽车销售模式也正在经历着数字化转型,以适应消费者需求的变化。这款小程序源码系统就是为帮助汽车4S店等销售商实现数字化转型而开发的。 以下是部分核心功能的代码模块&a…

合成数据在医疗保健行业的案例研究

从机器人辅助手术到医学成像技术,人工智能在医疗保健领域的应用正在迅速改变医疗保健行业,并改善服务成本和服务质量。例如,埃森哲表示,到 150 年,人工智能临床健康应用每年可以为美国医疗保健行业节省 2026 亿美元。 …

C++中的函数重载:多功能而强大的特性

引言 函数重载是C编程语言中的一项强大特性,它允许在同一个作用域内定义多个同名函数,但这些函数在参数类型、个数或顺序上有所不同。本文将深入探讨函数重载的用法,以及它的优势和应用场景。 正文 在C中,函数重载是一项非常有…

Spring Security使用总结八,Security的第二个功能授权,不同的角色访问不同的资源

前面五章基本都是给认证做铺垫的,这一章是security的另一个硬菜:授权,你在我这里注册,成为唯爱痞,我给你个令牌,你可以访问我资源,但是不能所有资源都给你,于是就有了授权,你只能访问我让你访问的资源,我不让你访问的资源,你一点都别想看。这里就出现了角色,不同的…

一个不用充钱也能让你变强的 VSCode 插件!!!

今天给大家推荐一款不用充钱也能让你变强的 vscode 插件 通义灵码(TONGYI Lingma),可以称之为 copilot 的替代甜品 💪 前言 之前一直使用的 GitHub Copilot,虽然功能强大,但是收费相对来说有点贵&#xf…

C 语言 while 和 do...while 循环

在本教程中,您将在示例的帮助下学习在C语言编程中创建while和do ... while循环。 在编程中,循环用于重复代码块,直到满足指定条件为止。 C语言编程具有三种类型的循环。 for循环 while循环 do... while循环 在上一教程中,我…

解决:AttributeError: ‘WebDriver‘ object has no attribute ‘find_element_by_xpath‘

解决:AttributeError: ‘WebDriver’ object has no attribute ‘find_element_by_xpath’ 背景 在使用之前的代码通过selenium定位元素时,报错:selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to l…

vioovi的ECRS工时分析软件:食品加工行业的生产效率提升利器

在食品加工行业,提高生产效率、降低成本、优化资源配置是至关重要的。随着科技的不断发展,越来越多的企业开始借助先进的软件工具来助力生产管理。本文将介绍一款备受食品加工企业青睐的工业工程软件——vioovi的ECRS工时分析软件,并探讨其如…

dapp技术开发

随着区块链技术的普及和应用,DApp(去中心化应用)逐渐成为了区块链领域中备受关注的核心部分。DApp是一种运行在去中心化网络上的应用程序,其开发、部署和运行都不依赖于任何中心化的实体或中介机构。这种应用程序的兴起和发展&…

基于springboot 手工艺品在线展示系统-计算机毕设 附源码 42553

springboot 手工艺品在线展示系统 目 录 摘要 1 绪论 1.1本课题研究意义 1.2系统开发目的 2 1.3系统开发技术的特色 3 1.4 springboot框架介绍 3 1.5论文结构与章节安排 4 2 手工艺品在线展示系统系统分析 5 2.1 可行性分析 5 2.2 系统流程分析 5 2.2.1数据增加流程 5 2.2.…

【正点原子STM32连载】 第四十八章 内存管理实验 摘自【正点原子】APM32F407最小系统板使用指南

1)实验平台:正点原子stm32f103战舰开发板V4 2)平台购买地址:https://detail.tmall.com/item.htm?id609294757420 3)全套实验源码手册视频下载地址: http://www.openedv.com/thread-340252-1-1.html## 第四…