获取元素的精确坐标

最新推荐文章于 2020-11-25 23:20:04 发布

原创最新推荐文章于 2020-11-25 23:20:04 发布 · 566 阅读

1 ·

CC 4.0 BY-SA版权

本文详细介绍了JavaScript中用于获取DOM元素相对于视口位置的坐标和窗口滚动偏移量的函数vargetCoords的实现原理及用法。包括计算窗口滚动距离的变量解释和关键步骤说明。


var getCoords = function(el){
	var box = el.getBoundingClientRect(),
		doc = elem.ownerDocument,
		html = doc.documentElement;
		body = doc.body,
		win = getWindow(doc),
		clientTop  = html.clientTop  || body.clientTop  || 0,
		clientLeft = html.clientLeft || body.clientLeft || 0,
		scrollTop  = win.pageYOffset || html.scrollTop  || body.scrollTop,
		scrollLeft = win.pageXOffset || html.scrollLeft || body.scrollLeft,
		top  = box.top  + scrollTop  - clientTop,
		left = box.left + scrollLeft - clientLeft;

	return { top: top, left: left };
}
function getWindow( el ) {
	return isWindow( el ) ?
			el :
			el.nodeType === 9 ?
				el.defaultView || el.parentWindow :
				false;
}
function isWindow( obj ) {
	return obj && typeof obj === 'object' && 'setInterval' in obj;
}

总结一下下：
[b][size=large]window.pageYOffset[/size][/b]
非IE的东东，和IE的document.body.scrollTop很像，它是我们所见到的网页顶端到事实上的网页顶端的距离，比如，如果出现垂直滚动条，一直拉到最下面，那么我们看到的只是一屏，这一屏的高度就是document.documentElement.clientHeight，此时的window.pageYOffset就是parseFloat(window.getComputedStyle(document.documentElement, null).getPropertyValue('height')) - document.documentElement.clientHeight

[b][size=large]clientTop, clientLeft[/size][/b]
这两个东西说白了就是上边框和左边框的宽度值