jQuery 溢出：隐藏在父对象上，检测子对象是否实际可见

Question

我对这个让我大吃一惊的 jQuery 有疑问。我已经尝试了人们在网上建议的三种不同的 JS 和 jQuery 函数来完成此任务，但似乎没有任何效果。

我试图在 .first 在屏幕上实际可见时隐藏 .arrow-up 类，并在 .last 在屏幕上可见时隐藏 .arrow-down 类。

听起来很简单，对吧？

父元素已经溢出：隐藏在它上面（就像大多数轮播一样——它们真的来自地狱）。有人知道怎么做吗？我真的很感激任何帮助，无论如何，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-list-container 是具有溢出的父级：隐藏在其上，并且 .first 和 .last 都在容器内。箭头类都在容器之外。

为任何想玩它的人打造这支笔。 http://codepen.io/seancrater/pen/waPNEW

谢谢！

Answer 1

这应该可行。但是请注意，我使用了 opacity: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');
    });