Question

我遇到了这个让我大开眼界的问题。我已经尝试了三种不同的JS和jQuery函数，人们在网上建议实现这一点并且似乎无法获得任何工作。

我正试图隐藏班级.arrow-up当.first在屏幕上实际可见，并在屏幕上显示.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

这应该有效。但请注意，我使用了不透明度：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'); });

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

2 个答案: