jQuery溢出：隱藏在父類中，檢測子類是否實際上可見

Question

我遇到了這個讓我非常頭疼的jQuery問題。我嘗試了三種不同的JS和jQuery功能，人們在網上建議完成此功能，並且似乎無法獲得任何工作。

我試圖隱藏類.arrow-up，當.first實際上在屏幕上可見並隱藏類時.arrow-down當.last在屏幕上可見時。

聽起來很簡單吧？那麼父元素有溢出：隱藏在其上（像大多數傳送帶 - 他們真的是來自地獄）。有人知道怎麼做嗎？我真的很感謝所有幫助，JS真的不是我的最強通過任何手段......

這是我目前的jQuery-

jQuery(document).ready(function ($) { 
     $(".arrow-down").bind("click", function (event) { 
      event.preventDefault(); 
      $(".vid-list-container").stop().animate({ 
       scrollTop: "+=300" 
      }, 300); 

     }); 
     $(".arrow-up").bind("click", function (event) { 
      event.preventDefault(); 
      $(".vid-list-container").stop().animate({ 
       scrollTop: "-=300" 
      }, 300); 
     }); 
}); 

在此，.vid列表容器與父溢出：隱藏在其上，並且.first和.last都在容器內。箭頭類都在容器外部。

爲任何想玩弄它的人打造了這支筆。 http://codepen.io/seancrater/pen/waPNEW

謝謝！

Answer 1

這應該工作。不過請注意，我使用了不透明度：0，所以仍然可以點擊箭頭。你需要改變它！

function checkDownArrow() { 
    setTimeout(function() { 
     if($(".vid-list-container").scrollTop() != 0){ 
      $('.arrow-up').css('opacity',1); 
     } 
     if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) >= $(".vid-item").length * $(".vid-item").height()) { 
      $('.arrow-down').css('opacity',0); 
     } 
     },350); 
} 

function checkUpArrow() { 
setTimeout(function() { 
     if($(".vid-list-container").scrollTop() == 0){ 
      $('.arrow-up').css('opacity',0); 
     } 
     if(($(".vid-list-container").scrollTop() + $(".vid-item").height()+5) < $(".vid-item").length * $(".vid-item").height()) { 
      $('.arrow-down').css('opacity',1); 
     } 
     },350); 
} 
checkDownArrow(); 
checkUpArrow(); 
jQuery(document).ready(function ($) { 
     $(".arrow-down").bind("click", function (event) { 
      event.preventDefault(); 
      $(".vid-list-container").stop().animate({ 
       scrollTop: "+=173" 
      }, 300); 
      checkDownArrow(); 

     }); 
     $(".arrow-up").bind("click", function (event) { 
      event.preventDefault(); 
      $(".vid-list-container").stop().animate({ 
       scrollTop: "-=173" 
      }, 300); 
      checkUpArrow(); 
     }); 
}); 

Answer 2

編輯

好了，我看到你有一個不同的問題...我可以建議使用一種不同的方法？像這樣的東西。

HTML：

<div class="outer-wrapper"> 
    <div class="inner-wrapper"> 
     <div class="vid-item"> 
      ... 
     </div> 
     <div class="vid-item"> 
      ... 
     </div> 
    </div> 
</div> 

CSS：

.outer-wrapper {width:200px; height:150px; overflow:hidden;} 
.inner-wrapper {height:auto; margin-top:0;} 
.vid-item {width:200px; height:150px;} 

JS：

var itemHeight = $('.vid-item').first().height(); 
    var wrapperHeight = $('.inner-container').height(); 

    $(".arrow-down").bind("click", function (event) { 
     event.preventDefault(); 
     var margin = parseInt($('.inner-container').css('margin-top')); 
     if(itemHeight - margin > wrapperHeight) { 
      $('.inner-container').css('margin-top', (itemHeight-wrapperHeight) + 'px'); 
      $('.arrow-down').addClass('hidden'); 
     } 
     else { 
      $('.inner-container').css('margin-top', (margin-itemHeight) + 'px'); 
     } 
     $('.arrow-up').removeClass('hidden'); 
    }); 

    $(".arrow-up").bind("click", function (event) { 
     event.preventDefault(); 
     var margin = parseInt($('.inner-container').css('margin-top')); 
     if(margin + itemHeight >= 0) { 
      $('.inner-container').css('margin-top', '0'); 
      $('.arrow-up').addClass('hidden'); 
     } 
     else { 
      $('.inner-container').css('margin-top', (margin+itemHeight) + 'px'); 
     } 
     $('.arrow-down').removeClass('hidden'); 
    });