How can I make a div's visibility depend on an object's scrollHeight and height properties?

Question

I've implemented some divs that will scroll up and down on mouseover. If there is no scroll, however, I'd like to make these divs disappear. I've attempted to do this by comparing the scrollHeight of the container with the real height of the container. If they match, I'd like the 'visibility' property of the hover scrolling divs to be 'hidden'.

Here's my code. What am I missing?

$(function () {
if ($('#container').scrollHeight() == $('#container').height()) {
    $('.HoverScrollUp,#HoverScrollDown').css('visibility': 'hidden');
    }
})

(And yes, .HoverScrollUp is supposed to be a class, and not an ID).

Thank you in advance for your help.

Answer 1

scrollHeight is a property of the DHTML object model which was first introduced by MSIE. It is referred to as the height of an element's physical scrolling view. MDN

Since it's a property and not a method, calling .scrollHeight() doesn't work. You have to access it like a property per qwertymk's example. Note it won't work in IE7. I'd recommend not using it altogether.

There's also a syntax problem with .css('visibility': 'hidden'); The : should be a ,

Try the following in place of scrollHeight :

if ($('#HoverScrollDown').outerHeight() < $('#container').innerHeight()) {
    $('.HoverScrollUp,#HoverScrollDown').css('visibility', 'hidden');
}else if ($('#HoverScrollDown').outerWidth() < $('#container').innerWidth()) {
    $('.HoverScrollUp,#HoverScrollDown').css('visibility', 'hidden');
}

Fiddle

Answer 2

Try this for the if statement:

if ($('#container')[0].scrollHeight === $('#container').height())

Although you should be caching the query:

$(function () {
    var $container = $('#container');

    if ($container[0].scrollHeight === $container.height()) {
        $('.HoverScrollUp,#HoverScrollDown').css('visibility': 'hidden');
    }
});

Don't ask me why this is, I had the same problem until I saw that this worked, maybe it's a bug in jQuery?