Detecting if vertical scroll is visible

Question

I have this jQuery code. How to do the same thing but using pure JavaScript? I want to detect if the scrollbar is visible.

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }

});

I had tried to do this way and it didn't work

if(document.body.height > window.height){
  alert("Vertical Scrollbar! D:");
}

Answer 1

You can use:

if(document.body.scrollHeight > window.innerHeight){
  alert("Vertical Scrollbar! D:");
}

See snippet for example:

 if(document.body.scrollHeight > window.innerHeight){ alert("Vertical Scrollbar! D:"); }

 <div style="height:1000px"></div>

Related: How to get height of entire document with JavaScript? and how to get exact height of body of the webbrowser window? .

Answer 2

You can insert div tag in your body tag and set div height and overflow auto.see below sample code.

<body>
   <div id="innerscroll" style="width: 100px; height:100px; overflow:auto;">* content</div>
</body>

Add script:

$(document).ready(function() {
    // Check if body height is higher than window height :)
    if ($("#innerscroll").get(0).scrollHeight > $(window).height()) {
        alert("Vertical Scrollbar! D:");
    }
});

Its working.

Answer 3

You can use:

if(document.body.scrollHeight > window.height){
  alert("Vertical Scrollbar! D:");
}

Detecting if vertical scroll is visible

Question

3 answers

solution1
1 ACCPTED 2019-02-07 04:10:13

solution2
0 2019-02-07 05:09:22

solution3
-1 2019-02-07 04:11:38

Detecting if vertical scroll is visible

Question

3 answers

solution1 1 ACCPTED 2019-02-07 04:10:13

solution2 0 2019-02-07 05:09:22

solution3 -1 2019-02-07 04:11:38

solution1
1 ACCPTED 2019-02-07 04:10:13

solution2
0 2019-02-07 05:09:22

solution3
-1 2019-02-07 04:11:38