scaleX（）で表示/非表示にしているときに要素の表示を確認するにはどうすればよいですか？

Question

私はこのpluginを使って水平のタイムラインを作成しています。左矢印と右矢印を使用して日付間を移動できます。日付をクリックすると、同じ日付に対応するフッターに変更されます。

私の問題は次のとおりです。特定の日付が現在のビューポートに表示されているかどうかを確認しようとしています。したがって、プラグインが最初にロードされた場合、次の日付が表示されます。「16 Jan」、「Feb Feb」、「20 Mar」、「20 May」が表示されます。右矢印をクリックすると、これらの日付が「09 Jul」、「30 Aug」、「15 Sep」、「01 Nov」の日付に置き換えられます。さて、この時点で、たとえば、 "16 Jan"という日付が表示されているかどうかを知りたいと思います（この場合は表示されません）。各日付は私がセレクタ以下（「1月16日」の一例）で確認したい要素を取得することができますdata-date属性の形で各日付に対応a要素に追加されているので

：

$("a[data-date='16/01/2014'");

今の視認性を確認するために、私が試してみました2つの異なるアプローチ：

（このanswerに見られるように）最初のアプローチ

$("a[data-date='16/01/2014'").is(':visible'); 

このアプローチは常に私を真実に戻し、したがって機能しません。 （このanswerに見られるように）

第二のアプローチ

function isElementInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
} 

、その後：

var a = $("a[data-date='16/01/2014'"); 
var b = isElementInViewport(); 

このアプローチは、いつも私がtrueを返し、これも動作しません。

各矢印をクリックした後に要素が表示され消えていく様子は、この特定の状況ではわからない影響があるCSS関数scaleX（）を使用しているために機能しないことがあります。

この後、私の質問は次のとおりです。この特定のケースで要素の可視性をチェックすることは可能ですか？もしそうなら、どうしたらいいですか？

Answer 1

要素は、実際に「見える」であるため、最初のアプローチは動作しません。次の行は、各日付要素の 'visible'（デフォルト値）であるcss visibility属性の値を単純にチェックします。

$（ "a [data-date = '16/01/2014 '']）は（ '：visible'）です。

ただし、一部の日付要素は表示されません。これは、これら隠された要素が実際にコンテナの外にあるからです。 第2のアプローチは、可能な解決策の1つに向かっています。次の関数は要素をとり、要素がビューポートにあるかどうかを判定します。

function isElementInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 

    return (
     rect.top >= 0 && 
     rect.left >= 0 && 
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */ 
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ 
    ); 
} 

上記のコードでは、ビューポートをウィンドウであると仮定されることに留意されたいです。これは、要素が画面領域外にあるかどうかを調べたい場合に便利です。しかし、あなたの要件はわずかに異なります。あなたの例では、ビューポートはこれらの日付要素のコンテナでなければなりません。ブラウザでタイムラインを調べると、イベントラッパーのdivがあり、すべての日付が非表示になっています。次のようにだから、あなたは上記の機能を変更することができます。

function isElementReallyInViewport (el) { 

    //special bonus for those using jQuery 
    if (typeof jQuery === "function" && el instanceof jQuery) { 
     el = el[0]; 
    } 

    var rect = el.getBoundingClientRect(); 
    var container = $('.events-wrapper')[0].getBoundingClientRect(); 

    return (
     rect.top >= container.top && 
     rect.left >= container.left && 
     rect.bottom <= container.bottom && 
     rect.right <= container.right 
    ); 
} 

を、私はあなたが共有していたし、正常に動作するようですexample内の要素のカップルでそれをテストしています。それがあなたを助けることを願っています

Answer 2

一つの方法は、水平方向の位置を比較するために、次のようになります。

function isElementVisible($elOrDate) { 

    var $el = (typeof $elOrDate === "string") ? $("a[data-date='" + $elOrDate + "'") : $elOrDate; 

    // We need the .event-wrapper element of the timeline 
    let $eventWrapper = $el.closest('.event-wrapper'); 

    // Get the position of the timeline: 
    var timelinePosition = $eventWrapper[0].getBoundingClientRect(); 

    // Then get the position of the element you're interested in:  
    var targetPosition = $el.getBoundingClientRect(); 

    var targetIsNotOffToTheLeft = targetPosition.right > timelinePosition.left; 
    var targetIsNotOffToTheRight = targetPosition.left < timelinePosition.right; 

    // The timeline is not scrollable vertically, so we only need to worry 
    // about the horizontal position 
    return targetIsNotOffToTheLeft && targetIsNotOffToTheRight; 

} 

// Usage: 

console.log(isElementVisible($("a[data-date='16/01/2014'"))); 

// Or with just the date: 

console.log(isElementVisible("16/01/2014"));