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

Question

I'm having an issue with this jQuery that is blowing my mind. I've tried three different JS and jQuery functions people suggested online for accomplishing this and can't seem to get anything to work.

I'm trying to hide the class .arrow-up when .first is actually visible on the screen and hide the class .arrow-down when .last is visible on the screen.

Sounds simple enough, right?

Well the parent element has overflow: hidden on it (like most carousels–they really are from hell). Anyone know how to do this? I'd really appreciate any help, JS really isn't my strongest by any means...

Here's my current 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);
        });
 });

In this, .vid-list-container is the parent with overflow: hidden on it and .first and .last are both inside the container. The arrow classes are both outside of the container.

Built this pen for anyone who wants to play around with it. http://codepen.io/seancrater/pen/waPNEW

Thanks!

Answer 1

This should work. Notice however that I used opacity:0, so the arrow can still be clicked. You need to change that!

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

EDIT

Okay, I see you have a different problem... may I suggest using a different approach? Something like this.

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