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

Question

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 (ie 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 1

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 :))

Answer 2

我会在this.height.change(*your function here*)上使用事件侦听器，然后使用返回值触发一个函数，该函数将使用jQuery的show和hide来显示/隐藏滚动按钮