javascript - jQuery 溢出 : Hidden on Parent, 检测 child 是否实际上可见

Question

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

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

听起来很简单，对吧？

好吧，父元素有 overflow: 隐藏在它上面(就像大多数轮播一样——它们真的来自 hell )。有人知道怎么做吗？我真的很感激任何帮助，无论如何 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: 的父级:隐藏在其上，而 .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();
        });
 });