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

Question

我遇到了这个 jQuery 的问题，这让我大吃一惊。我已经尝试了人们在网上建议的三种不同的 JS 和 jQuery 函数来完成此操作，但似乎无法正常工作。

我试图在 .first 在屏幕上实际可见时隐藏 class .arrow-up 并在 .last 在屏幕上可见时隐藏 class .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 是带有 overflow: hidden 的父级，而 .first 和 .last 都在容器内。箭头 class 都在容器外。

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

谢谢！

Answer 1

编辑

好的，我看到你有一个不同的问题...我可以建议使用不同的方法吗？像这样。

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

Answer 2

这应该有效。但是请注意，我使用了 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();
        });
 });

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

jQuery Overflow: Hidden on Parent, Detect if Child is Actually On Visible

javascript

jquery

overflow

hidden

visible