检查元素是否在屏幕上可见 [英] Check if element is visible on screen

问题描述

可能重复：

jQuery - 检查元素在滚动后是否可见

我正在尝试确定元素是否在屏幕上可见。为了达到这个目的，我试图使用offsetTop找到元素的垂直位置，但返回的值不正确。在这种情况下，除非向下滚动，否则元素不可见。但尽管如此，当我的屏幕高度为703时，offsetTop返回值618，因此根据offsetTop元素应该是可见的。

I'm trying to determine if an element is visible on screen. In order to to this, I'm trying to find the element's vertical position using offsetTop, but the value returned is not correct. In this case, the element is not visible unless you scroll down. But despite of this, offsetTop returns a value of 618 when my screen height is 703, so according to offsetTop the element should be visible.

我正在使用的代码看起来像这样：

The code I'm using looks like this:

function posY(obj)
{
  var curtop = 0;

  if( obj.offsetParent )
  {
    while(1)
    {
      curtop += obj.offsetTop;

      if( !obj.offsetParent )
      {
        break;
      }

      obj = obj.offsetParent;
    }
  } else if( obj.y )
    {
     curtop += obj.y;
    }

  return curtop;
}

提前谢谢！

推荐答案

BenM说，您需要检测视口的高度+滚动位置以匹配您的顶部poisiton。你使用的功能还可以完成这项工作，虽然它的功能更加复杂。

Well BenM stated, you need to detect the height of the viewport + the scroll position to match up with your top poisiton. The function your using is ok and does the job, though its abit more complex ath it needs to.

如果你不使用 jQuery 然后脚本将是这样的：

If you dont use jQuery then the script would be something like this:

function posY(elm) {
    var test = elm, top = 0;

    while(!!test && test.tagName.toLowerCase() !== "body") {
        top += test.offsetTop;
        test = test.offsetParent;
    }

    return top;
}

function viewPortHeight() {
    var de = document.documentElement;

    if(!!window.innerWidth)
    { return window.innerHeight; }
    else if( de && !isNaN(de.clientHeight) )
    { return de.clientHeight; }

    return 0;
}

function scrollY() {
    if( window.pageYOffset ) { return window.pageYOffset; }
    return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
}

function checkvisible( elm ) {
    var vpH = viewPortHeight(), // Viewport Height
        st = scrollY(), // Scroll Top
        y = posY(elm);

    return (y > (vpH + st));
}

使用jQuery要容易得多：

Using jQuery is a lot easier:

function checkVisible( elm, evalType ) {
    evalType = evalType || "visible";

    var vpH = $(window).height(), // Viewport Height
        st = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();

    if (evalType === "visible") return ((y < (vpH + st)) && (y > (st - elementHeight)));
    if (evalType === "above") return ((y < (vpH + st)));
}

这甚至提供了第二个参数。使用可见（或没有第二个参数）时，它会严格检查元素是否在屏幕上。如果它设置为高于，当相关元素在屏幕上或屏幕上方时，它将返回true。

This even offers a second parameter. With "visible" (or no second parameter) it strictly checks wether an element is on screen. If it is set to "above" it will return true when the element in question is on or above the screen.

请参阅操作： http://jsfiddle.net/RJX5N/2/

我希望这回答了你的问题。

I hope this answers your question.

- 改进版本 -

这是更短，也应该这样做：

This is a lot shorter and should do it as well:

function checkVisible(elm) {
  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

用小提琴证明： http://jsfiddle.net/t2L274ty/1/

还有一个版本阈值和模式包括：

function checkVisible(elm, threshold, mode) {
  threshold = threshold || 0;
  mode = mode || 'visible';

  var rect = elm.getBoundingClientRect();
  var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
  var above = rect.bottom - threshold < 0;
  var below = rect.top - viewHeight + threshold >= 0;

  return mode === 'above' ? above : (mode === 'below' ? below : !above && !below);
}

并用小提琴证明： http://jsfiddle.net/t2L274ty/2/

这篇关于检查元素是否在屏幕上可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！