首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >scrollTop()方法

scrollTop()方法

作者头像
Java架构师必看
发布2022-09-26 21:34:16
发布2022-09-26 21:34:16
1.6K0
举报
文章被收录于专栏:Java架构师必看Java架构师必看

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说scrollTop()方法,希望能够帮助大家进步!!!

scrollTop设置滚动条用法

前提

工作中需要做一个点击右侧网元或板卡,左侧topo图滚动到对应位置

用到的知识点

代码语言:javascript
复制
 scrollTop(),position(),工作环境中用了Jtopo,Ztree
 Math.abs(value)  获取一个值的绝对值

只听到从架构师办公室传来架构君的声音:

黄花古渡接芦溪,行过萍乡路渐低。有谁来对上联或下联?

  • scrollTop定义与用法

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 scroll top offset 指的是滚动条相对于其顶部的偏移。 如果该方法未设置参数,则返回以像素计的相对滚动条顶部的偏移。 $(selector).scrollTop(offset) //offset可选

  • position定义与用法

position() 方法返回匹配元素相对于父元素的位置(偏移)。 该方法返回的对象包含两个整型属性:top 和 left,以像素计。 $(selector).position()

详解

下面是个人总结,如有不对请帮忙指出!

第一种情况:

① > 0 , 左侧topo树顶部仍在浏览器可视范围内:

③=②+①; //此时②=0

第二种情况:

① > 0 ,topo树顶部超出浏览器范围(此情况可与第一种合到一起写):

此时② < 0, ③ = 1 + Math.abs(②);

第三种情况:

① < 0,点击点在浏览器看不到的位置

此时③ =Math.abs( ② - ①)

源码:

代码语言:javascript
复制
此代码由Java架构师必看网-架构君整理
// 根据topo图定位topo树
				let treeHeight = $("#right_topoTree ul").height();  //topo树高度
				var bheight = document.body.clientHeight;  //网页可视高度
				if(treeHeight > bheight*0.8){ 
                //Topo树高度大于一定值时才进行定位,防抖
					const zTree = $.fn.zTree.getZTreeObj("topoTree");
					var sNodes = zTree.getSelectedNodes();
					if (sNodes.length > 0) { 
   
						var tId = sNodes[0].tId;
						var offset =$("#"+tId).position(); 
						const offsetTop = offset.top;   //当前选中节点距离顶部的高度,即 1 的高度
						
						var globalOffset = $("#topoTree_1_a").position();
						var globalOffsetTop = globalOffset.top;   //全局视图节点距离顶部的高度 即 2 的高度
						
						if(offsetTop >= 0){ 
   
							if(offsetTop - (bheight/2) >= 0){ 
   
								$("#right_Tree").scrollTop(offsetTop+Math.abs(globalOffsetTop));
							}
						}else{ 
   
							if(offsetTop<0){ 
   
								var scroll = globalOffsetTop-offsetTop;
								$("#right_Tree").scrollTop(Math.abs(scroll));
							}
						}
						
					}
				}

总结:

中间用了好久思考当点击点不在浏览器界面内,滚动条的位置怎么获取,是相对于谁获取的。

只要弄明白,滚动条的获取是相对于其顶部的,就简单多了,加油!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-09-242,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • scrollTop设置滚动条用法
    • 前提
    • 用到的知识点
    • 详解
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档