Jquery的offset()和position()高度计算不正确解决办法

最新推荐文章于 2022-11-23 09:09:11 发布

转载最新推荐文章于 2022-11-23 09:09:11 发布 · 735 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/1444945/blog/775681

文章标签：

#javascript #python #ViewUI

本文介绍了一个在使用Jquery的offset()和position()方法遇到的问题及解决方案。作者最初尝试通过获取元素的位置来实现滚动效果，但在实际应用中发现结果不准确。最终通过累加目标元素前所有元素的高度解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Jquery的offset()和position()高度计算不正确解决办法

今天是10月25号，程序员节后的第一天，我们现在了还在改BUG，妈蛋。今天遇见一个很无语的问题，就是在页面上获取offset()和position()的top属性时，发现不是自己想要的，很无语。。。

不知道怎么换行。。。

本来页面是用锚点定位的，后来发现在IE11下不好用（万恶的IE。。。）。于是就采用scrollTop解决。一开始思路很好：获取目标元素的position().top，设置父元素滚动条scrollTop这么高，问题就好了。但是实际上有问题，估计跟页面布局有关系。两次获取元素的position().top还不一样，我是没办法了。

这里还是换行。。。

最后，突然灵光一闪，想到可以把目标元素之前所有元素的高度，在相加求和，就是父元素scrollTop的值。按照这样思路试了试，果然可以。代码如下：

		$(".testcard div a").on("click", function() {
			$(".testcard div a").removeClass("card-com");
			$(this).addClass("card-com");
			var index = $(this).parents(".testcard").attr("tabIndex");
			index = index-1;
			$(".tab-option input").eq(index).trigger("click");
			
			var prevEleHeightSum = 0;
			var prevEleList = $($(this).attr("ref")).prevAll();
			if(prevEleList.length > 0){
				$.each(prevEleList,function(index,obj){
					prevEleHeightSum += $(obj).**outerHeight**(true);
				});
			}
			$(".question-option:visible").scrollTop(prevEleHeightSum);
			return false;
		});

prevEleList 就是目标元素的前面同级所有元素（同级的） outerHeight(true);获取元素的高度，包括边框、padding什么的； scrollTop( );设置滚动高度位置；最后的return false；是因为那个a标签，为了在ie中兼容。

转载于:https://my.oschina.net/u/1444945/blog/775681