Question

我正在尝试找一个jquery插件来帮助我确定一个对象是否在视口中，但是我尝试的每个插件都在视口和中清楚地报告了所有对象。视。他们都这样做。我尝试过的最后一个verge plugin，可以选择使用requestsCounter显示视口高度。在我的页面上返回的值是整个文档的高度。我认为这可能是问题的根源。有没有人见过这种行为？

以下是显示操作错误的 a sample doc：

Answer 1

你走了：

SaltAPI

你可以像这样使用它：

(function($) {
   $.inviewport = function(element, settings) {
      var __window = $(window),
         __bottom = __window.height() + __window.scrollTop() + settings[2],
         __top = __window.scrollTop() + settings[0],
         __right = __window.width() + __window.scrollLeft() + settings[1],
         __left = __window.scrollLeft() + settings[3],
         __elem = $(element);

      return 
           !(__bottom <= __elem.offset().top) 
        && !(__top >= __elem.offset().top + __elem.height()) 
        && !(__right <= __elem.offset().left) 
        && !(__left >= __elem.offset().left + __elem.width());
   };

   $.extend($.expr[':'], {
      "in-viewport": function(a, i, m) {
         return $.inviewport(a, m[3].split(',').map(function(x){ return x*1; }));
      }
   });
})(jQuery);

其中参数（top，right，bottom，left是要添加到原始视口的边距，如果需要精确视口，则可以传递0。

codepen：http://codepen.io/shotap/pen/meQLZP

Answer 2

window.innerHeight将返回客户端浏览器的可查看区域，包括滚动条（如果有）。不要使用jQuery。如果您想要准确的尺寸，请使用JavaScript。使用JS与jQ不存在任何兼容性问题，除非您正在引用，收集，操作等元素。

的 PLUNKER

段

＆＃13;
＆＃13;
var vpHeight = window.innerHeight; var vpWidth = window.innerWidth; document.getElementById('out').innerHTML = "Viewport Height: " + vpHeight + "px<br/><br/>Viewport Width: " + vpWidth + "px";
＆＃13;
<h3>View this in Full Page Mode</h3> <p>If viewed within a reduced window of Snippet's iframe, it will only return measurements of iframe since iframe's window is different than client's window object. Reload after resizing browser for accurate dimensions.</p> <output id='out'></output><br/><br/> <button onclick='location.reload()'>Reload</button>
＆＃13;
＆＃13;
＆＃13;

视口高度返回文档高度

2 个答案:

段