Frank78 Frank78 - 4 months ago 10
HTML Question

Show/hide class depending on if there is a vertical scrollbar or not

I'm new to jQuery and have been trying to get this to work but have been unsuccessful. I can get portions of my code working, but haven't been able to get it all working together.

On my website, I have an up and down arrow (both inside a single parent class) that will scroll to the top/bottom of the page when clicked -- I have this working already using jQuery.

However, I only want these arrows to be displayed if there's actually anything to scroll (i.e. if there's a scrollbar present); otherwise I want them to be hidden.

(function($) {
$.fn.hasScrollBar = function() {
return this.get(0).scrollHeight > this.height();
}
})(jQuery);


That code above will return true or false depending on the presence of a scrollbar, but I haven't been able to get it working with my function (I don't have to use that code, it's just what I found).

Answer
window.onresize=arrows;
window.onload=arrows;

function arrows(){
if(document.body.scrollHeight > window.innerHeight){
document.getElementById("arrow").style.display="block";
}else{
document.getElementById("arrow").style.display="none";
}
}

Not jquery but its working (or not :))

Comments