-3

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:");
}
Erik Philips
  • 53,428
  • 11
  • 128
  • 150
claudiopb
  • 1,056
  • 1
  • 13
  • 25

3 Answers3

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?.

Mukyuu
  • 6,436
  • 8
  • 40
  • 59
0

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.

suhanthangs
  • 21
  • 3
-1

You can use:

if(document.body.scrollHeight > window.height){
  alert("Vertical Scrollbar! D:");
}
Imon
  • 659
  • 1
  • 4
  • 11