當父母的溢出受到影響時隱藏div：隱藏;'

我正在使用動態時間軸，父元素在每次點擊時都推動子元素200px，問題在於，由於設計原因，在第一次點擊滑塊按鈕後，沒有機會在時間軸上僅顯示4個元素，我的問題是，如何隱藏子元素在「開始」時被父項溢出，或者如何隱藏在視口上不可見的元素。當父母的溢出受到影響時隱藏div：隱藏;'

// 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文件中讀取數據，這裏是JS，當用戶在其上點擊

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

希望這有助於之間，這是我的第一個問題在這裏移動滑塊，

來源

2017-03-10 Marko.dev

檢查實際的溢出以及它如何渲染只會使問題更加困難。你可以分享決定時間表上顯示內容的邏輯嗎？與檢查DOM和CSS屬性相比，使用數據邏輯解決此問題可能會更容易。 – Shilly

如果您只能顯示4個元素，那麼您是否可以跟蹤元素的數量，並在超過4個元素時執行您需要執行的操作？ –

4個元素總是可見的，我使用Ajax加載內容，並且所有元素都將被加載，但只有4個會在視圖端口上完全可見，兩個div上的一半是可見的 –

我忘了這個問題，但我做到了，而且很簡單。我一直在觀察元素offset().left，直到等於或大於「右移」箭頭的offset().left，而不是相反的那一方。

來源

2017-09-28 13:38:19

當父母的溢出受到影響時隱藏div：隱藏;'

回答

相關問題