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

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

代码:

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)
      }
    }

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

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

相关文章

调试 Mahony 滤波算法的思考 10

调试 Mahony 滤波算法的思考 1. 说在前面的2.Mahony滤波算法的核心思想3. 易懂的理解 Mahony 滤波算法的过程4. 其他的一些思考5. 民间 9轴评估板 1. 说在前面的 之前调试基于QMI8658 6轴姿态解算的时候,我对Mahony滤波的认识还比较浅薄。初次的学习和代码的移植让…

超全大厂UI库分享,可免费套用!

今天我们要给大家分享的是TDesign、Arco Design、Ant Design、Material design等6个优秀的大厂UI库,一次性打包送给大家,通通免费用。大厂UI库都是经过无数次的事件检验的,扛住了许多种使用场景和突发情况的组件资源库,是前人的经…

超声波热量表和电磁热量表有哪些区别?

随着我们能源消耗日益增长,热量计量已成为节能减排、能源管理的重要手段。热量表是用于测量热能消耗的仪表,其中超声波热量表和电磁热量表是常见的两种类型。下面,就由小编来为大家详细的介绍下超声波热量表和电磁热量表的区别,一…

C语言C位出道心法(四):文件操作

C语言C位出道心法(一):基础语法 C语言C位出道心法(二):结构体|结构体指针|链表 C语言C位出道心法(三):共用体|枚举 C语言C位出道心法(四):文件操作 一:C语言操作文件认知升维: 二:文件打开 三:文件读写操作 忙着去耍帅,后期补充完整.................................

SuperMap iDesktopX基于地形DEM数据做最佳路径分析

问题1: 现有某山区的DEM高程数据,以及该地区电塔位置数据(DT)、电力维护工作基地(GZJD)(电力工作人员的工作居住地)。为了安全稳定的供电,电力工程师需要随时对所有的电塔进行检查维护。为了减少工作人员在路上的耗费,我们需要根据地形、电塔和工作基地的位置点来进行路径分…

PBJ | IF=13.8 利用ChIP-seq和ATAC-seq技术揭示MdRAD5B调控苹果耐旱性的双重分子作用机制

2023年10月24日,西北农林科技大学园艺学院管清美教授团队在Plant Biotechnology Journal(最新IF:13.8)上发表题为“The chromatin remodeller MdRAD5B enhances drought tolerance by coupling MdLHP1-mediated H3K27me3 in apple…

C语言实现将一个数组逆序输出,使用指针数组操作

完整代码&#xff1a; // 将一个数组逆序输出&#xff0c;使用指针数组操作 #include<stdio.h>//将一个数组逆序输出 void reverse(int *arr,int len){//头指针int *startarr;//尾指针int *endarrlen-1;//通过交换数组中前后所有的数&#xff0c;来使数组逆序while (sta…

Leetcode 第 368 场周赛题解

Leetcode 第 368 场周赛题解 Leetcode 第 368 场周赛题解题目1&#xff1a;2908. 元素和最小的山形三元组 I思路代码复杂度分析 题目2&#xff1a;2909. 元素和最小的山形三元组 II思路代码复杂度分析 题目3&#xff1a;2910. 合法分组的最少组数思路代码复杂度分析 题目4&…

10 路由协议:西出网关无故人,敢问路在何方

1.网络包出了网关之后&#xff0c;就有了一种漂泊的悲凉感 2.之前的场景是比较简单的场景&#xff0c;但是在实际生产环境下&#xff0c;出了网关&#xff0c;会面临着很多路由器&#xff0c;有很多条道路可以选。 3、如何配置路由&#xff1f; 路由表的设计 1.路由器就是一…

基于GCC的工具objdump实现反汇编

一&#xff1a;objdump介绍 在 Linux中&#xff0c;一切皆文件。 Linux 编程实际上是编写处理各种文件的代码。系统由许多类型的文件组成&#xff0c;但目标文件具有一种特殊的设计&#xff0c;提供了灵活和多样的用途。 目标文件是包含带有附加地址和值的助记符号的路线图。这…

Leetcode 第 369 场周赛题解

Leetcode 第 369 场周赛题解 Leetcode 第 369 场周赛题解题目1&#xff1a;2917. 找出数组中的 K-or 值思路代码复杂度分析 题目2&#xff1a;2918. 数组的最小相等和思路代码复杂度分析 题目3&#xff1a;2919. 使数组变美的最小增量运算数思路代码复杂度分析 题目4&#xff1…

Spring中Bean的生命周期

目录 Spring中Bean的生命周期容器中Bean对象创建流程BeanPostProcessor接口InstantiationAwareBeanPostProcessor接口DestructionAwareBeanPostProcessor接口 相关测试代码 Spring中Bean的生命周期 #mermaid-svg-3amPMFJe1D1hgKEY {font-family:"trebuchet ms",verda…

畜牧猪舍养殖成功 管理效率提高的背后原因

畜牧养猪远程监控方案 畜牧养猪物联网远程监控方案其目的是为了提高养猪场的管理效率&#xff0c;降低生产成本&#xff0c;提高猪肉质量和养殖安全。现有的方案通常包括传感器和无线网络设备&#xff0c;这些设备可以监测养猪场的温度、湿度、气体浓度、环境光照等指标&#…

招商银行余额截图生成器在线,虚拟金额中国农业邮政建设工商,易语言开源例子

其实用易语言的画板写一个图片生成器真的非常简单&#xff0c;我这里都没用任何第三方的支持库&#xff0c;当然也可以用EXUI画板自绘功能&#xff0c;但是用这个默认的就足够了&#xff0c;而且画出来的图非常高清&#xff0c;软件框架里面比较模糊因为缩放的原因&#xff0c;…

第一章:IDEA使用介绍

系列文章目录 文章目录 系列文章目录前言一、IDEA 的使用1.1 IDEA 工作界面1.2 IDEA 的基本介绍和使用1.3 IDEA 使用技巧和经验1.4 IDEA编译与源文件1.5 IDEA 常用快捷键1.6 IDEA模板/自定义模板 总结 前言 IDEA 全称 IntelliJ IDEA&#xff0c;在业界被公认为最好的 Java 开发…

PHP之getimagesize获取网络图片尺寸、类型信息

[0]&#xff1a;图像宽度&#xff08;以像素为单位&#xff09;[1]&#xff1a;图像高度&#xff08;以像素为单位&#xff09;[2]&#xff1a;图像类型的标识符[3]&#xff1a;包含字符串的属性&#xff0c;用于布局img元素&#xff08;例如&#xff1a;width"xxx" …

阿里巴巴国际站为什么凉了?数字一体化方案崛起!

随着全球化和数字化的浪潮不断涌现&#xff0c;跨境电商市场一直以惊人的速度增长。中国作为主要的出口和进口市场之一&#xff0c;成为跨境贸易的重要参与者。然而&#xff0c;近年来&#xff0c;阿里巴巴国际站似乎面临了一些挑战&#xff0c;同时数字一体化方案崭露头角&…

大口径智能水表支持最高水流量是多少?

随着科技的不断发展&#xff0c;我国城市化进程的加快&#xff0c;水资源管理日益受到重视。作为一种先进的用水计量设备&#xff0c;大口径智能水表凭借其高精度、低误差、远程抄表等优点&#xff0c;在市场上备受青睐。那么接下来&#xff0c;小编就来为大家详细的介绍一下大…

金蝶云星空下游单据的操作控制上游单据的状态转换开发方案

文章目录 金蝶云星空下游单据的操作控制上游单据的状态转换开发方案说明方案设计开发实现售后单增加变更状态反写规则反写状态&#xff1a;在保存配置了反写状态保存后删除&#xff0c;反写规则不生效&#xff0c;需要在删除操作配置插件根据关联关系进行反写生效操作&#xff…

第二证券:机构策略:大盘有望继续走出震荡攀升走势

3053点上方途径压力较为明显&#xff0c;短期内打破3053点上方途径需求量能的不断释放&#xff0c;周三两市成交量再度打破万亿&#xff0c;这为后市向上打破奠定了基础&#xff0c;短线大盘打破前期3053点上方途径难以一蹴即至&#xff0c;但先行目标科创100、国证2000现已光复…