视口高度返回文档高度

Question

我试图找到一个 jquery 插件来帮助我确定一个对象是否在视口中，但我尝试的每个插件都清楚地报告了视口中的所有对象 及以下 在视口中。他们都这样做。我试过的最后一个 verge plugin 有一个选项可以使用 verge.viewportH() 显示视口高度。我页面上这个returns的值就是整个文档的高度。我认为这可能是问题的根源。有人见过这种行为吗？

这里 a sample doc显示了操作错误：

Answer 1

给你：

(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);

你可以这样使用它：

$(':in-viewport(100,0,1,0)');

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

代码笔：http://codepen.io/shotap/pen/meQLZP

Answer 2

window.innerHeight 将 return 客户端浏览器的可视区域，包括滚动条（如果有）。不要使用 jQuery。如果您想要准确的尺寸，请使用 JavaScript。除非您引用、收集、操作等元素，否则将 JS 与 jQ 一起使用应该不会有任何兼容性问题。

PLUNKER

片段

var vpHeight = window.innerHeight;
var vpWidth = window.innerWidth;

document.getElementById('out').innerHTML = "Viewport Height:  " + vpHeight + "px<br/><br/>Viewport Width: " + vpWidth + "px";

<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>

视口高度返回文档高度

viewport height returning document height

jquery

viewport

片段