web-dev-qa-db-ja.com

要素が画面に表示されるかどうかを確認します

可能性のある複製：
jQuery-スクロール後に要素が表示されるかどうかを確認

要素が画面に表示されるかどうかを判断しようとしています。これを行うために、offsetTopを使用して要素の垂直位置を見つけようとしていますが、返される値は正しくありません。この場合、下にスクロールしない限り、要素は表示されません。ただし、これにもかかわらず、画面の高さが703の場合、offsetTopは618の値を返します。したがって、offsetTopに従って要素を表示する必要があります。

私が使用しているコードは次のようになります。

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

前もって感謝します！

javascriptpositionoffset
62
Robert

BenMは、ビューポートの高さ+スクロール位置を検出して、トップポイシトンと一致させる必要があると述べました。あなたが使用している機能は大丈夫で、仕事をしますが、必要なことは少し複雑です。

jQueryを使用しない場合、スクリプトは次のようになります。

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の使用ははるかに簡単です。

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

これは2番目のパラメーターも提供します。 "visible"（または2番目のパラメーターなし）を使用すると、要素が画面上にあるかどうかを厳密にチェックします。 「上」に設定されている場合、問題の要素が画面上または画面上にあるときにtrueを返します。

実際の動作を参照してください： http://jsfiddle.net/RJX5N/2/

これがあなたの質問に答えることを願っています。

-改善されたバージョン-

これははるかに短いため、同様に行う必要があります。

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/

そして、thresholdとmodeを含むバージョンが含まれます：

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/

114
Tokimon

JQueryはブラウザ間の互換性があるため使用できますか？

function isOnScreen(element)
{
    var curPos = element.offset();
    var curTop = curPos.top;
    var screenHeight = $(window).height();
    return (curTop > screenHeight) ? false : true;
}

そして、次のようなものを使用して関数を呼び出します。

if(isOnScreen($('#myDivId'))) { /* Code here... */ };
16
BenM