blocks|key|1465069|text|在我的例子中，为了安全起见，我在方程式中添加了window.scroll：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465070|var+element+=+document.getElementById('myElement');
var+topPos+=+element.getBoundingClientRect().top+%2B+window.scrollY;
var+leftPos+=+element.getBoundingClientRect().left+%2B+window.scrollX;|code-block|syntax|javascript|1465071|这使我能够获得元素在文档上的实际相对位置，即使它已经被滚动。|1465072|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

On my case, just to be safe regarding scrolling, I added the window.scroll to the equation:

<pre><code>var element = document.getElementById('myElement');
var topPos = element.getBoundingClientRect().top + window.scrollY;
var leftPos = element.getBoundingClientRect().left + window.scrollX;
</code></pre>

That allows me to get the real relative position of element on document, even if it has been scrolled.

blocks|key|1250372|text|var+element+=++document.querySelector('selector');
var+bodyRect+=+document.body.getBoundingClientRect(),
++++elemRect+=+element.getBoundingClientRect(),
++++offset+++=+elemRect.top+-+bodyRect.top;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1250373|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>var element = document.querySelector('selector');
var bodyRect = document.body.getBoundingClientRect(),
 elemRect = element.getBoundingClientRect(),
 offset = elemRect.top - bodyRect.top;
</code></pre>

blocks|key|1465193|text|jQuery很好地实现了这一点。如果你查看jQuery的offset的源代码，你会发现它基本上是如何实现的：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1465194|var+rect+=+elem.getBoundingClientRect();
var+win+=+elem.ownerDocument.defaultView;

return+{
++++top:+rect.top+%2B+win.pageYOffset,
++++left:+rect.left+%2B+win.pageXOffset
};|code-block|syntax|javascript|1465195|entityMap^0|S|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

jQuery implements this quite elegantly. If you look at the source for jQuery's <code>offset</code>, you'll find this is basically how it's implemented:

<pre><code>var rect = elem.getBoundingClientRect();
var win = elem.ownerDocument.defaultView;

return {
 top: rect.top + win.pageYOffset,
 left: rect.left + win.pageXOffset
};
</code></pre>

blocks|key|1250381|text|function+inViewport(element)+{
++++let+bounds+=+element.getBoundingClientRect();
++++let+viewWidth+=+document.documentElement.clientWidth;
++++let+viewHeight+=+document.documentElement.clientHeight;

++++if+(bounds['left']+<+0)+return+false;
++++if+(bounds['top']+<+0)+return+false;
++++if+(bounds['right']+>+viewWidth)+return+false;
++++if+(bounds['bottom']+>+viewHeight)+return+false;

++++return+true;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1250382|source|unstyled|offset|length|1250383|entityMap|0|LINK|mutability|MUTABLE|url|https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/^0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code>function inViewport(element) {
 let bounds = element.getBoundingClientRect();
 let viewWidth = document.documentElement.clientWidth;
 let viewHeight = document.documentElement.clientHeight;

 if (bounds['left'] &lt; 0) return false;
 if (bounds['top'] &lt; 0) return false;
 if (bounds['right'] &gt; viewWidth) return false;
 if (bounds['bottom'] &gt; viewHeight) return false;

 return true;
}
</code></pre>

<a href="https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/" rel="noreferrer">source</a>

blocks|key|1250082|text|this页面上的函数将返回一个矩形，其中包含传递的元素相对于浏览器视图端口的顶部、左侧、高度和宽度坐标。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1250083|++++localToGlobal:+function(+_el+)+{
+++++++var+target+=+_el,
+++++++target_width+=+target.offsetWidth,
+++++++target_height+=+target.offsetHeight,
+++++++target_left+=+target.offsetLeft,
+++++++target_top+=+target.offsetTop,
+++++++gleft+=+0,
+++++++gtop+=+0,
+++++++rect+=+{};

+++++++var+moonwalk+=+function(+_parent+)+{
++++++++if+(!!_parent)+{
++++++++++++gleft+%2B=+_parent.offsetLeft;
++++++++++++gtop+%2B=+_parent.offsetTop;
++++++++++++moonwalk(+_parent.offsetParent+);
++++++++}+else+{
++++++++++++return+rect+=+{
++++++++++++top:+target.offsetTop+%2B+gtop,
++++++++++++left:+target.offsetLeft+%2B+gleft,
++++++++++++bottom:+(target.offsetTop+%2B+gtop)+%2B+target_height,
++++++++++++right:+(target.offsetLeft+%2B+gleft)+%2B+target_width
++++++++++++};
++++++++}
++++};
++++++++moonwalk(+target.offsetParent+);
++++++++return+rect;
}|code-block|syntax|javascript|1250084|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.jpencola.com/2009/08/17/getting-coordinates-relative-to-the-viewport-in-javascript/^0|0|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

The function on <a href="http://blog.jpencola.com/2009/08/17/getting-coordinates-relative-to-the-viewport-in-javascript/" rel="nofollow noreferrer">this</a> page will return a rectangle with the top, left, height and width co ordinates of a passed element relative to the browser view port.

<pre><code> localToGlobal: function( _el ) {
 var target = _el,
 target_width = target.offsetWidth,
 target_height = target.offsetHeight,
 target_left = target.offsetLeft,
 target_top = target.offsetTop,
 gleft = 0,
 gtop = 0,
 rect = {};

 var moonwalk = function( _parent ) {
 if (!!_parent) {
 gleft += _parent.offsetLeft;
 gtop += _parent.offsetTop;
 moonwalk( _parent.offsetParent );
 } else {
 return rect = {
 top: target.offsetTop + gtop,
 left: target.offsetLeft + gleft,
 bottom: (target.offsetTop + gtop) + target_height,
 right: (target.offsetLeft + gleft) + target_width
 };
 }
 };
 moonwalk( target.offsetParent );
 return rect;
}
</code></pre>

blocks|key|1250118|text|您可以尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1250119|node.offsetTop+-+window.scrollY|offset|length|style|CODE|1250120|它在定义了viewport+meta标签的Opera上工作。|1250121|entityMap^0|0|0|V|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

You can try:

<code>node.offsetTop - window.scrollY</code>

It works on Opera with viewport meta tag defined.

blocks|key|1464983|text|谢谢你所有的答案。Prototype似乎已经有一个函数可以做到这一点(+page()函数)。通过查看该函数的源代码，我发现它首先计算相对于页面(即文档顶部)的元素偏移量位置，然后从中减去scrollTop。更多详情请参考prototype的源码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1464984|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Thanks for all the answers. It seems Prototype already has a function that does this (the page() function). By viewing the source code of the function, I found that it first calculates the element offset position relative to the page (i.e. the document top), then subtracts the scrollTop from that. See the source code of prototype for more details.

blocks|key|1250205|text|我假设网页中存在一个id为btn1的元素，并且还包含jQuery。这已经适用于所有现代浏览器，如Chrome、FireFox、IE+>=9和Edge。jQuery仅用于确定相对于文档的位置。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1250206|var+screenRelativeTop+=++$("#btn1").offset().top+-+(window.scrollY+%7C%7C+
++++++++++++++++++++++++++++++++++++++++++++window.pageYOffset+%7C%7C+document.body.scrollTop);

var+screenRelativeLeft+=++$("#btn1").offset().left+-+(window.scrollX+%7C%7C
+++++++++++++++++++++++++++++++++++++++++++window.pageXOffset+%7C%7C+document.body.scrollLeft);|code-block|syntax|javascript|1250207|entityMap^0|D|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I am assuming an element having an id of <code>btn1</code> exists in the web page, and also that jQuery is included. This has worked across all modern browsers of Chrome, FireFox, IE >=9 and Edge.
jQuery is only being used to determine the position relative to document.

<pre><code>var screenRelativeTop = $("#btn1").offset().top - (window.scrollY || 
 window.pageYOffset || document.body.scrollTop);

var screenRelativeLeft = $("#btn1").offset().left - (window.scrollX ||
 window.pageXOffset || document.body.scrollLeft);
</code></pre>

blocks|key|1250295|text|对于IE，有时getBoundingClientRect()对象的属性值显示为0。在这种情况下，您必须为元素设置display+=+'block'。你可以为所有浏览器使用下面的代码来获得偏移量。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1250296|扩展jQuery功能：|1250297|(function($)+{
++++jQuery.fn.weOffset+=+function+()+{
++++++++var+de+=+document.documentElement;
++++++++$(this).css("display",+"block");
++++++++var+box+=+$(this).get(0).getBoundingClientRect();
++++++++var+top+=+box.top+%2B+window.pageYOffset+-+de.clientTop;
++++++++var+left+=+box.left+%2B+window.pageXOffset+-+de.clientLeft;
++++++++return+{+top:+top,+left:+left+};
++++};
}(jQuery));|code-block|syntax|javascript|1250298|使用：|1250299|var+elementOffset+=+$("#"+%2B+elementId).weOffset();|1250300|entityMap^0|7|N|1K|H|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

Sometimes <code>getBoundingClientRect()</code> object's property value shows 0 for IE. In that case you have to set <code>display = 'block'</code> for the element. You can use below code for all browser to get offset.

Extend jQuery functionality :

<pre><code>(function($) {
 jQuery.fn.weOffset = function () {
 var de = document.documentElement;
 $(this).css("display", "block");
 var box = $(this).get(0).getBoundingClientRect();
 var top = box.top + window.pageYOffset - de.clientTop;
 var left = box.left + window.pageXOffset - de.clientLeft;
 return { top: top, left: left };
 };
}(jQuery));
</code></pre>

Use :

<pre><code>var elementOffset = $("#" + elementId).weOffset();
</code></pre>

I want to get the position of an element relative to the browser's viewport (the viewport in which the page is displayed, not the whole page). How can this be done in JavaScript?

Many thanks

How to get an element's top position relative to the browser's viewport?

我想要获取一个元素相对于浏览器的视区(显示页面的视区，而不是整个页面)的位置。在JavaScript中如何做到这一点呢？非常感谢

问如何获得元素相对于浏览器视窗的顶部位置？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得元素相对于浏览器视窗的顶部位置？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何获得元素相对于浏览器视窗的顶部位置？
EN