divが親のオーバーフローの影響を受ける場合は非表示にします：hidden;

Question

私はダイナミックなタイムラインに取り組んでいます、親要素は、すべてのクリックで子要素200pxをプッシュしています、問題は、デザインのため、スライダボタンを最初にクリックした後、タイムライン上に4要素だけを表示する機会がありません、親要素で「開始」されたときに子要素を非表示にする方法、またはビューポートで100％表示されない要素を非表示にする方法。

// Single timeline element 
    $('<div/>', { 
     'class': 'timeline-holder ' + value.content_type + '-element' + elementClass, 
     'text': 'Text Only', 
     'html': '<div class="circle-timeline circle-background-'+ value.override_content_type_icon +'">' + 
     // '<p>2005</p>' + 
     '<span>' + value.segment_label + '</span>' + 
     '<div class="timeline-block">' + 
     '<span>' + value.segment_label + '</span>' + 
     '<h2>' + value.headline + '<i class="fa fa-star ' + favoriteClass + '" aria-hidden="true"></i>' + 
     '<div class="bookmark ' + bookmarkClass + '">B</div>' + 
     '</h2>' + 
     blockContent + 
     imageBlock + 
     iframeElement + 
     readmoreButton + 
     downloadButton + 
     '</div>' + 
     '</div>' 
    }).appendTo('#timeline-slider'); 

私はJSONファイルからデータを読んでいます、ここでこれは私の第一の質問はここにある間、ユーザは、その上でこのことができます

function moveLeft() { 

    var currentMargin = parseInt(tmSlider.css('margin-left')); 

    // Check if animation is in progress 
    if (!tmSlider.hasClass('animating')) { 

     tmSlider.addClass('animating'); // lock slider with class 

     elementsToMove = timelineData.timeline.elements_to_move; // reset 

     var countElementsLeftToShow = totalElements - stepsPassed - 4; 

     sliderLastMove(countElementsLeftToShow); 

     stepsPassed = stepsPassed + elementsToMove; 

     // Move sldier 
     tmSlider.animate({ 
      'marginLeft': currentMargin - sliderStep 
     }, 500, function() { 
      setTimeout(function() { 
       tmSlider.removeClass('animating'); 
      }, 500); 
     }); 
    } 
} 

function moveRight() { 

    var currentMargin = parseInt(tmSlider.css('margin-left')); 

    // Check if animation is in progress 
    if (!tmSlider.hasClass('animating')) { 

     tmSlider.addClass('animating'); // lock slider with class 

     elementsToMove = timelineData.timeline.elements_to_move; 

     sliderLastMove(stepsPassed); 

     stepsPassed = stepsPassed - elementsToMove; 

     // Move slider 
     tmSlider.animate({ 
      'marginLeft': currentMargin + sliderStep 
     }, 500, function() { 
      setTimeout(function() { 
       tmSlider.removeClass('animating'); 
      }, 500); 
     }); 
    } 
} 

rightArrow.on('click', function() { 
    moveLeft(); 
    prepareData(); 
    // displayArrow() 
}); 

leftArrow.on('click', function() { 
    moveRight(); 
    // displayArrow(); 
}); 

希望をクリックしたときにスライダーを移動JS、

Answer 1

私はありますこの質問を忘れましたが、私はこれをしました、そして、それは簡単でした。 私は要素を見ていたoffset().leftそれは矢印「右に移動」、および他側とのopositeよりのoffset().leftと同等またはそれ以上になるまで。