使用jquery获取元素相对于视口的位置

什么是相对于视口（而不是文档）获取页面元素位置的正确方法。 jQuery.offset函数看起来很有希望：

获取第一个元素的当前坐标，或设置匹配元素集合中每个元素相对于文档的坐标。

但是这是相对于文件。 有没有一个等效的方法返回相对于视口的偏移量？

Answer 1

查看Dimensions插件，特别是scrollTop() / scrollLeft() 。 信息可以在http://api.jquery.com/scrollTopfind。;

Answer 2

确定元素大小和位置的最简单方法是调用它的getBoundingClientRect（）方法。 此方法返回视口坐标中的元素位置。 它期望没有参数，并返回一个对象的属性左，右，上 ， 下 。 left和top属性给出了元素左上angular的X和Y坐标，右下angular属性给出了右下angular的坐标。

element.getBoundingClientRect(); // Get position in viewport coordinates

无处不在支持

Answer 3

这里有两个函数来获取页面高度和滚动量（x，y），而不使用（bloated）尺寸插件：

 // getPageScroll() by quirksmode.com function getPageScroll() { var xScroll, yScroll; if (self.pageYOffset) { yScroll = self.pageYOffset; xScroll = self.pageXOffset; } else if (document.documentElement && document.documentElement.scrollTop) { yScroll = document.documentElement.scrollTop; xScroll = document.documentElement.scrollLeft; } else if (document.body) {// all other Explorers yScroll = document.body.scrollTop; xScroll = document.body.scrollLeft; } return new Array(xScroll,yScroll) } // Adapted from getPageSize() by quirksmode.com function getPageHeight() { var windowHeight if (self.innerHeight) { // all except Explorer windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowHeight = document.body.clientHeight; } return windowHeight } 

Answer 4

jQuery.offset需要与scrollTop和scrollLeft结合使用，如下图所示：

演示：

 function getViewportOffset($e) { var $window = $(window), scrollLeft = $window.scrollLeft(), scrollTop = $window.scrollTop(), offset = $e.offset(), rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() }, rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() }; return { left: offset.left - scrollLeft, top: offset.top - scrollTop, insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1 }; } $(window).on("load scroll resize", function() { var viewportOffset = getViewportOffset($("#element")); $("#log").text("left: " + viewportOffset.left + ", top: " + viewportOffset.top + ", insideViewport: " + viewportOffset.insideViewport); }); 

 body { margin: 0; padding: 0; width: 1600px; height: 2048px; background-color: #CCCCCC; } #element { width: 384px; height: 384px; margin-top: 1088px; margin-left: 768px; background-color: #99CCFF; } #log { position: fixed; left: 0; top: 0; font: medium monospace; background-color: #EEE8AA; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- scroll right and bottom to locate the blue square --> <div id="element"></div> <div id="log"></div> 

Answer 5

这是一个计算视口中元素当前位置的函数：

 /** * Calculates the position of a given element within the viewport * * @param {string} obj jQuery object of the dom element to be monitored * @return {array} An array containing both X and Y positions as a number * ranging from 0 (under/right of viewport) to 1 (above/left of viewport) */ function visibility(obj) { var winw = jQuery(window).width(), winh = jQuery(window).height(), elw = obj.width(), elh = obj.height(), o = obj[0].getBoundingClientRect(), x1 = o.left - winw, x2 = o.left + elw, y1 = o.top - winh, y2 = o.top + elh; return [ Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)), Math.max(0, Math.min((0 - y1) / (y2 - y1), 1)) ]; } 

返回值是这样计算的：

用法：

 visibility($('#example')); // returns [0.3742887830933581, 0.6103752759381899] 

演示：

 function visibility(obj) {var winw = jQuery(window).width(),winh = jQuery(window).height(),elw = obj.width(), elh = obj.height(), o = obj[0].getBoundingClientRect(),x1 = o.left - winw, x2 = o.left + elw, y1 = o.top - winh, y2 = o.top + elh; return [Math.max(0, Math.min((0 - x1) / (x2 - x1), 1)),Math.max(0, Math.min((0 - y1) / (y2 - y1), 1))]; } setInterval(function() { res = visibility($('#block')); $('#x').text(Math.round(res[0] * 100) + '%'); $('#y').text(Math.round(res[1] * 100) + '%'); }, 100); 

 #block { width: 100px; height: 100px; border: 1px solid red; background: yellow; top: 50%; left: 50%; position: relative; } #container { background: #EFF0F1; height: 950px; width: 1800px; margin-top: -40%; margin-left: -40%; overflow: scroll; position: relative; } #res { position: fixed; top: 0; z-index: 2; font-family: Verdana; background: #c0c0c0; line-height: .1em; padding: 0 .5em; font-size: 12px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="res"> <p>X: <span id="x"></span></p> <p>Y: <span id="y"></span></p> </div> <div id="container"><div id="block"></div></div> 

Answer 6

我发现，截至2014年1月，cballou的答案在Firefox中不再起作用。具体来说， if (self.pageYOffset)没有触发，如果客户端已经滚动到右侧，但没有下降 – 因为0是一个错误的数字。 由于Firefox支持document.body.scrollLeft / Top ，但是这已经不再适用于我（在Firefox 26.0上）。

这是我的修改解决scheme：

 var getPageScroll = function(document_el, window_el) { var xScroll = 0, yScroll = 0; if (window_el.pageYOffset !== undefined) { yScroll = window_el.pageYOffset; xScroll = window_el.pageXOffset; } else if (document_el.documentElement !== undefined && document_el.documentElement.scrollTop) { yScroll = document_el.documentElement.scrollTop; xScroll = document_el.documentElement.scrollLeft; } else if (document_el.body !== undefined) {// all other Explorers yScroll = document_el.body.scrollTop; xScroll = document_el.body.scrollLeft; } return [xScroll,yScroll]; }; 

testing和工作在FF26，Chrome 31，IE11。 几乎可以肯定，所有这些旧版本的作品。