scrolltop()方法-ag真人游戏

scrolltop设置滚动条用法

前提

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

用到的知识点

 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( ② - ①)

源码：

//				根据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));
							}
						}
						
					}
				}

总结：
中间用了好久思考当点击点不在浏览器界面内，滚动条的位置怎么获取，是相对于谁获取的。
只要弄明白，滚动条的获取是相对于其顶部的，就简单多了，加油！